useRef

useRef 란?

useRef는 크게 두가지 역할을 하는데,

첫번째로 특정 DOM을 선택하는 역할을 합니다.

두번째로는 current 속성을 가지고 있는 객체를 반환합니다. 이는 인자로 넘어온 초기값을 current 속성에 할당합니다. 이 current 속성은 값을 변경해도 상태를 변경할 때처럼 컴포넌트가 다시 랜더링되지 않습니다.

DOM 이란? HTML과 JavaScript를 이어주는 공간으로, 작성한 HTML을 JavaScript가 이해할 수 있도록 Object로 변환하는 것이다.

React 공식문서에 적혀있는 useRef의 기본 구조와 설명은 다음과 같다.

const refContainer = useRef(initialValue);

useRef는 .current 프로퍼티로 전달된 인자 (initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애 주기를 통해 유지될 것이다

useRef(변수 관리)

useRef 특정 DOM을 선택하는 용도 이외에도 Component 안에서 조회 및 수정이 가능한 변수를 관리하는 용도로도 사용된다. 하지만 useRef 이용해서 변수를 업데이트 하게 되면 해당 Component가 리렌더링 되지 않기 때문에 리렌더링을 원한다면 callback ref를 사용해야 한다. but ! 굳이 리렌더링이 필요없는 변수를 다룰때는 useRef를 사용하는 것이 효율적이다!

useRef를 통해 관리되는 변수가 주로 쓰이는 곳

• setTimeout, setInterval을 통해 만들어진 id
• scroll의 위치
• 배열에 새 항목이 추가 될 때 필요한 고유 key 값
• 외부 라이브러리를 사용하여 생성된 인스턴스