반응형
※ useRef
- 가상돔 요소가 담길 빈 참조객체
- 참조하고 있는 가상돔요소를 useRef로 만든 참조 객체와 연결
EX) <article ref={article}></article>
- const 변수 = useRef(초기값)
- 변수에는 useRef의 초기값을 활용해서 빈 참조객체가 생성 됨.
- 해당 객체안에는 current키 값이 자동생성 되면서 초기값이 담김
- 빈 참조객체를 원하는 가상돔 요소에 ref속성을 지정해서 참조 가능
- 참조된 가상요소는 이벤트 발생시 자유롭게 호출 가능
- useRef는 보통 이벤트 연결 시 제어해야 되는 가상돔을 참조할 때 주로 쓰임
- 사용 순서
1. 변수에 useRef(null)을 대입해서 일단 빈 참조객체 생성
2. 원하는 가상돔 요소에 ref={참조객체}로 연결
3. 참조객체명.current형식으로 참조된 가상돔 요소를 자유롭게 호출
- useRef의 다른 사용 예 (useState를 쓰면 새로고침 처럼 되니까 전역변수처럼 쓰고싶으면 useRef를 써야된다는 뜻)
- component 안쪽에서 측정 값을 변경하고 싶은데 해당 값 변경시 component를 재호출 하고 싶지 않을 때
- component가 다른 state에 의해서 재호출 되더라도 특정 값을 초기화시키고 싶지 않을 때
'IT > React' 카테고리의 다른 글
[React] Component children 정리 (0) | 2023.06.29 |
---|---|
[React] react-router-dom (Link , NavLink, Switch) (0) | 2023.06.29 |
[React] document.querySelector 를 가급적 쓰면 안되는 이유 (0) | 2023.06.29 |
[React] useEffect 정리 (0) | 2023.06.26 |
[React] Hook 정리 (0) | 2023.06.23 |