useRef

함수 컴포넌트에서 useRef는 ref오브젝트를 반환한다.

{ current: value }  인자로 넣어준 초기값이 ref안에 있는 current에 저장된다.

컴포는트가 unmount되기전까지는 그 값을 유지한다.

 

useRef의 활용

1. state와 비슷하게 값을 저장하는 저장공간의 역할

useState는 state의 값이 변화하면 다시 렌더링이 되어 컴포넌트의 내부 변수들을 초기화한다.

이때 원치않는 렌더링때문에 어려움을 겪을때가 있다.

이럴때 useRef를 사용하면 변수는 값이 바뀐다고 해서 컴포넌트가 다시 렌더링되지 않는다. 

 

2. DOM요소에 접근

컴포넌트 특정 DOM을 선택해야 할 때, ref를 사용한다.

함수 커포넌트에서 이를 설정 할 때 useRef를 사용하여 DOM요소에 접근한다.