23화: Referencing Values with Refs

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

참새. Unsplash 에 Alberto Gasco 님이 올림

공식 문서

https://react.dev/learn/referencing-values-with-refs

Referencing Values with Refs – React

컴포넌트에 ref 추가하기

• import { useRef } from 'react';
• const ref = useRef(0); 로 초기 설정
• ref.current 로 값 접근 및 변형
• ref는 리렌더링하더라도 잃어버리지 않음
• ref.current를 바꿔도 리렌더링이 일어나지 않음 -> 렌더링에 사용하지 않는 값 담기!

ref vs state

ref	state
useRef 는 { current: initialValue } 를 반환함	useState 는 [value, setValue]를 반환함
값이 변해도 리렌더링을 유발하지 않음	값을 변경하면 리렌더링이 일어남
변형 가능	변형 불가능
렌더링 도중에 ref.current를 읽거나 쓰면 안 됨 (렌더링 함수의 순수성 유지)	언제든지 상태값을 읽어도 되지만 snapshot임을 기억하기

useRef의 동작 원리

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

• useRef는 useState를 이용해서 구현 가능
• useState를 이용해서 리렌더링에도 { current: initialValue } 객체를 기억하게끔 함
• 상태값 내부의 current를 변형하더라도 리액트는 리렌더링을 유발하지 않음
• 상태 변경 함수를 사용하지 않으므로 항상 같은 객체의 참조값을 돌려줌

ref는 언제 써야 할까

• setTimeout id를 기억할 때
• DOM element를 저장하고 조작할 때
• JSX를 만드는 데 필요 없는 값들을 기억할 때

ref 맛있게 쓰는 법

• ref는 비상탈출구: 어플리케이션의 로직이나 데이터 흐름이 ref에 많이 의존하고 있다면 다시 생각해 볼 것
• 렌더링 도중에 ref.current를 읽거나 쓰지 말 것: 렌더링에 필요한 정보를 담아야 한다면 상태를 이용할 것
• ref는 snapshot이 아니라 그냥 자바스크립트 객체: 마음대로 변형해도 됨