[React] Referencing Values with Refs

■ State vs Ref

State

• Read only
• state가 업데이트될 때마다 해당 컴포넌트가 리렌더링
• setter 함수를 활용해 state 값을 변경해도 state의 변경이 동기적으로 이루어지지 않음

Ref

• Read and Write
• ref가 업데이트되어도 리렌더링이 발생하지 않음
• ref.current 값을 변경할 때마다 값의 변경이 동기적으로 이루어짐

■ useRef 파악하기

function useRef(initialValue) {
  const [ref, unused] = useState({ current: initialValue });
  return ref;
}

ref는 useState로 구성되는 훅이지만, state를 추적하지 않기 때문에 state setter 함수는 사용되지 않는다. (unsused)

useRef를 통해 생성한 ref 값은 항상 다음과 같은 plain javascript object를 리턴한다.

ref = {
	current: initialValue
}

■ 언제 사용하는가?

일반적으로 DOM element에 접근할 때 사용한다.

■ 결론

Ref는 리렌더링을 유발하지 않고 값을 유지할 수 있는 esacpe hatch!
리렌더링이 발생하지 않는 이상 리액트는 ref.current 값의 변화를 인식할 수 없다!