useRef hook

 

useRef란?
렌더링시 변하지 않는 값을 사용할수 있게 해주는 hook이다.
일반적으로는 DOM요소를 보유하는데 사용된다.

 

 

useRef 왜 사용해야 할까?

React의 함수형 컴포넌트에서 렌더링과는 상관없이 독립적으로 값을 저장하고 유지할수 있게 해주는 Hook이다. 일반적으로 DOM요소에 대한 참조를 유지하는데 사용되지만, 권장되지 않지만 렌더링에 영향을 주지않고도 데이터를 저장하고 업데이트할 수 있는 장점이 있다.

useRef 구문

• const ref = useRef(initValue)
  • initValue: ref객체의 current프로퍼티에 초기에 지정되는 값이다. 모든유형의 값이 될수 있으며, 초기렌더링 후에는 무시된다.

1. useRef는 단일 프로퍼티를(current) 가진 객체를 반환한다.
2. DOM에 접근하기 위해서는 React의 속성중 하나인 ref속성을 사용한다.
3. 컴포넌트의 로컬 객체로 유지된다.(컴포넌트간 공유가 불가능하다는 소리)
4. ref.current 속성을 변경하여도 렌더링이 발생하지 않는다.(React는 언제변경되는지 인식하지 못한다.)
5. 초기값 설정이후에는 언제든지 다른 값으로 설정이 가능하다.

useRef의 동작방식

• 마운트(Mount): 컴포넌트가 최초로 화면에 나타날때 초기값을 설정한다.
• 언마운트(Unmount): 컴포넌트가 화면에서 사라질때 일반적으로 초기값은 유지되며, 컴포넌트가 마운트되면 다시 초기값을 재설정한다.

useRef의 사용법

- 렌더링시 변하지 않는값 사용법

타이머에 적용했을때의 상황이다. 모든기능에 useRef가 쓰인것이아닌 시작, 이어서시작에 적용되어있으며,

시간이 흘러갈시에 Interval ID를 intervalRef에 저장하여 시작을 여러번 눌렀을시, 이어서시작을 여러번눌렀을시에 이전 interval ID를 삭제하고 다시 새로운값을 할당하여 사용했다. setInterval은 누를때마다 실행되기때문에 이전 id를 삭제해주는 역할로 사용했다. 

https://stackblitz.com/edit/stackblitz-starters-uyxahz?file=src%2FApp.tsx

 

- DOM요소에 접근하는 사용법(다른 DOM요소의 Ref)

일반적인 태그에접근할때는 ref속성을 사용하여 접근할수 있다. 하지만 컴포넌트는 기본적으로 자체의 DOM 노드를 노출하지 않는다. 그렇기에 외부에서 전달된 ref를 직접 사용할수가 없다. 즉 외부에서 컴포넌트 내부의 DOM요소를 직접적으로 접근하려고 한다면 forwarRef를 사용하여 해당 DOM요소로 ref를 전달해야한다.

https://stackblitz.com/edit/stackblitz-starters-w4rlpg?file=src%2FApp.tsx

useRef의 주의할점

- 최상위 레벨 호출: useRef 를 호출하려면 구성요소의 최상위 수준에서 호출해야한다.

- 렌더링 중: useRef를 사용할때는 렌더링 중에 초기화를 제외한 읽기 및 쓰기를 금지해야 한다.(비동기적으로 읽고 쓰는 것은 무관)

- 객체: useRef가 반환하는 객체는 JavaScript의 일반적인 객체이다.

- 상태: 브라우저의 렌더링이 필요한 값으로 사용하는것은 좋지 않은 방법이다.

- DOM: React에서 관리하는 DOM노드를 변경하면 안된다.

- 올바른사용처: DOM요소에 초점을 맞추거나 스크롤 처럼 측정기능들에 해당하는 비파괴적인 작업에 참조를 사용해야한다.

useRef의 참고문서

useRef – React