useRef()
useRef()는 react로 안되는 것을 할 때 사용한다.
- react에서 DOM엘리먼트의 주소값을 활용해야 하는 경우
- focus-text selection
- media playback
- 애니메이션 적용-d3.js, greenback등 DOM 기반 라이브러리 활용
특히 Dom엘리먼트의 특정 메소드를 활용해야 할 때 자주 사용된다.
react에서 DOM엘리먼트에 직접 접근하여 메소드를 이용할 방법이 제한적이기 때문이다.
ref속성을 활용해서 DOM엘리먼트, react엘리먼트의 주소값을 useRef의 리턴값에 전달할 수 있다.
const 변수명 = useRef(참조자료형)useRef의 초기값에는 어떤 참조자료형도 할당할 수 있지만, DOM엘리먼트나 react엘리먼트의 주소값을 할당하여 사용하는 경우가 더 많다.
보통 초기값으로 null을 사용한다.
null을 사용하는 이유는 current(객체)의 속성이 비어있기 때문이다.
여기서 undefined와 null을 간단히 적어보자면 이러하다.
undefined -> 어떠한 속성이 없다.
null -> 어떤속성이 있으나 비어있다.
useRef의 리턴값은 변화되어도 컴포넌트가 재렌더링 되지 않기 때문에 애플리케이션에서 변화하는 값은 state로 지정하여 이용해야 한다.
