데브허브 | DEVHUB | 리액트 뽀개기 - 7강 useRef 이해 / React, Typescript리액트 뽀개기 - 7강 useRef 이해 / React, Typescript
useRef는 useState와 달리 데이터 변경 시 컴포넌트 리렌더링을 유발하지 않으며, 화면에 표시되지 않는 내부 로직 데이터 관리에 적합합니다. 👻
- 컴포넌트가 리렌더링되어도 데이터 값을 보존하며,
.current 속성을 통해 즉시 접근 및 수정이 가능하여 현재 렌더링 주기 내에서 업데이트된 값을 바로 반영합니다. 🎯
- 타이머(예:
setInterval, setTimeout) ID와 같은 가변적인 값을 관리하여, 여러 타이머가 동시에 실행되는 것을 방지하고 기존 타이머를 효율적으로 제거하는 데 활용됩니다. ⏱️
- 사용자 입력에 대한 디바운싱(Debouncing) 로직 구현에 유용하여, 사용자가 입력을 멈춘 후 일정 시간 뒤에만 특정 액션(예: API 호출)을 실행하도록 할 수 있습니다. ⏳
useEffect 훅과 함께 사용하여 이전 렌더링 주기에서의 상태 값을 저장하고 추적하는 데 활용될 수 있습니다. ⏪
useRef와 useEffect를 조합하여 usePreviousValue와 같은 재사용 가능한 커스텀 훅을 만들어 코드의 재사용성과 가독성을 높일 수 있습니다. 🛠️
- (영상에서 언급되었으나 자세히 다루지 않음)
useRef는 HTML DOM 요소에 직접 접근하여 조작하는 데 사용될 수 있습니다. 🏗️