React Refs 및 useRef Hook 사용하기
React는 선언적(declarative) 방식을 사용합니다. 상태(state)를 업데이트하면 React가 UI를 업데이트합니다. 이는 대부분의 작업에 효과적입니다.
하지만 때로는 Virtual DOM의 범위를 벗어나야 할 때가 있습니다. 실제 HTML 요소를 직접 제어해야 할 수도 있죠. 이때 Refs와 useRef hook이 필요합니다.
Ref란 무엇인가요?
Ref는 포인터입니다. React를 네이티브 DOM 노드에 직접 연결해 줍니다.
왜 useState 대신 useRef를 사용하나요?
State 업데이트는 리렌더링(re-render)을 트리거합니다. 즉, React가 화면에 컴포넌트를 다시 그립니다. Ref 업데이트는 리렌더링을 트리거하지 않습니다. 따라서 값이 변경되더라도 UI에 즉시 반영될 필요가 없는 경우에 사용하기 완벽합니다.
주요 사용 사례:
• 입력 필드에 자동으로 포커스 맞추기. • 비디오 또는 오디오 요소 제어(재생/일시정지). • 요소의 너비 또는 높이 측정하기. • interval 또는 timeout을 위한 타이머 ID 저장하기.
useRef 사용법:
- React에서
useRef를 가져옵니다. - 초기화합니다:
const myRef = useRef(null). - 요소에 연결합니다:
<input ref={myRef} />. - 값을 다음과 같이 접근합니다:
myRef.current.
예제 1: 입력 필드 자동 포커스
사용자가 페이지에 들어왔을 때 커서가 텍스트 박스에 위치하기를 원한다면, useEffect를 사용하여 컴포넌트가 마운트된 후 myRef.current.focus()를 호출하면 됩니다.
예제 2: 스톱워치
setInterval ID를 state에 저장하면 타이머가 작동할 때마다 컴포넌트가 리렌더링됩니다. 이는 성능을 저하시킵니다. 반면 ID를 ref에 저장하면 컴포넌트의 성능을 빠르게 유지할 수 있습니다. 값은 리렌더링 사이에서도 안전하게 유지되면서 브라우저에 추가적인 부담을 주지 않습니다.
State vs Ref:
• State: 리렌더링을 트리거합니다. UI 데이터를 위해 사용됩니다. 업데이트는 비동기적(asynchronous)입니다. • Ref: 리렌더링을 트리거하지 않습니다. DOM 접근 및 메모리 저장을 위해 사용됩니다. 업데이트는 동기적(synchronous)입니다.
시니어 개발자를 위한 프로 팁:
• 과도한 사용을 피하세요. 선언적 로직으로 해결할 수 없는 경우에만 ref를 사용하세요.
• 메모리를 정리하세요. cleanup 함수에서 항상 interval이나 이벤트 리스너를 해제해야 합니다.
• 렌더링 중에 ref에 값을 쓰지 마세요. ref.current 업데이트는 useEffect나 이벤트 핸들러 내부에서만 수행해야 합니다. 이는 사이드 이펙트(side effects)를 방지합니다.
• forwardRef를 사용하세요. 커스텀 자식 컴포넌트에 ref를 전달하려면 해당 자식 컴포넌트를 React.forwardRef로 감싸야 합니다.
Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde