[hooks] useRef

const ref = useRef(value)

예시로, const ref = useRef("hi")에서 useRef를 부르면 ref오브젝트를 반환한다.

ref 오브젝트는 {current:"hi"} 이렇게 생겼다.

 

ref 오브젝트는 수정이 가능하기 때문에 언제든 우리가 원하는 값으로 바꿀 수 있다.

ref.current="hello" 이렇게 사용하면 된다.

 

반환된 ref 는 컴포넌트의 전 생애 주기를 통해 유지가 된다.

컴포넌트가 계속 렌더링되어도 언마운트되기 전까지는 값을 그대로 유지할 수 있다.

 

대표적으로 useRef 2가지 상황에 쓰인다.

 

1. state와 비슷하게 값을 저장하는 저장공간으로 사용된다.

 state의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화

(리렌더링이 되면 함수가 다시 불려져 내부 모든 변수들이 초기화된다.)

 

 Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨

state대신 ref를 사용하면  불필요한 렌더링을 막을 수 있다. 변경시 렌더링을 발생시키지 말아야하는 값을 다룰 때 사용!

 

 

2. DOM 요소에 접근

 

예시로, Input 요소를 클릭하지 않아도 포커스를 주고 싶을 때 사용

로그인 화면이 보여졌을 때, 아이디를 넣는 input에 자동적으로 포커스가 되어 있으면 바로 아이디로 입력가능

Ref를 사용하면 손쉽게 이런 작업이 가능하다.