✏️ useRef

1. 저장공간

2. DOM요소 접근방법

 

ref : reference 레퍼런스라는 뜻을 가지고 있음.

 

ref 안에는 corrent값이 있음.

 

설정된 ref값은 컴포넌트가 계속해서 렌더링 되어도 계속 유지함. (unmount전까지)

 

1. 저장공간 -> state와 비슷한 역할을 한다. 하지만 state는 변화가 일어나면 다시 렌더링이 일어나서 내부 변수들은 초기화된다고 보면됨

ref에 저장된 값은 렌더링을 일으키지 않음. ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화 되는 것을 막아줌.

ex)컴포넌트가 100번 렌더링 되었다 -> ref에 저장한 값은 유지됨.

 

정리하면 state는 리렌더링 될때 꼭 필요한 값을 다룰 때 쓰면 좋음.

ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용. (내부로 안보일때 사용해도됨)

 

ref는 객체이므로 countRef.current 를 적어줘야함. (초기값을 적어주려면)

-> 렌더링은 안일어남

 

 

2. DOM에 접근하는 방식