useRef 구조와 원리
useRef는 렌더링과 별개로 변수를 저장하고, DOM 요소에 접근하기 위해 사용하는 훅이다.
이 훅은 객체를 반환하며, current 속성에 값을 저장한다.
예를 들어, useRef를 사용하여 DOM 요소에 접근하거나, 렌더링 간에 값을 유지할 수 있다.
useRef가 변해도 리렌더링이 발생하지 않는다.
const myRef = useRef(initialValue);
📌 주요 속성 및 역할 | 속성 | 설명 | |————–|————————————————————–| | current | 참조하고 있는 값이나 DOM 요소를 담고 있음. 값을 읽거나 쓸 수 있음. | | initialValue | useRef를 처음 호출할 때 설정하는 초기값. |
useRef는 컴포넌트가 리렌더링되어도 값을 유지하지만, 값이 바뀌어도 렌더링을 다시 트리거하진 않음.
- 포커스 이동, 스크롤 조작 등 DOM 제어
- 이전 값 기억하거나 렌더링 없이 값 유지
- setTimeout, setInterval 등에 접근할 때
