[React] useRef 언제 사용해야할까?

함수형 컴포넌트에서 선언된 변수들은 렌더링 될 때마다 다시 생성된다. 해당 변수가 함수를 참조하고 있어도 동일하다. 그럼 렌더링과 관계 없이 유지하고 >싶은 변수는 어떻게 해야할까?

💡 ref

ref는 컴포넌트가 DOM 노드나 timeout ID와 같이 렌더링에 사용되지 않는 일부 정보를 보유할 수 있게 해준다. state와 달리 ref를 업데이트해도 컴포넌트가 다시 렌더링되지는 않는다. ref는 React 패러다임에서 “탈출구”다. 브라우저 빌트인 API와 같이 React가 아닌 시스템에서 작업해야 할 때 유용하다.

🔎 useRef

• ref를 선언할 수 있는 훅
• 어떤 값도 담을 수 있지만, 일반적으로 DOM 노드를 담는데 사용

const ref = useRef(0); //0 초기값

console.log(ref.current) // 0

• useRef의 반환 값 { current: 0 }
• ref.current 속성을 통해 해당 ref의 현재 값에 접근 가능
• React가 추적하지 않는 컴포넌트의 '비밀 주머니'!
• ref는 current 속성을 읽고 수정할 수 있는 일반 JavaScript 객체

✨ ref의 변경은 리렌더링을 유발하지 않는다.

React는 ref.current가 언제 변경되는지 알지 못해서, 렌더링 중에 읽어도 컴포넌트의 동작을 예측하기 어렵다. 렌더링 중에 사용하는 정보는 state를 쓰자.

✨ 주로 돔 조작 시 사용한다.

React는 렌더링 출력과 일치하도록 DOM을 자동으로 업데이트하므로 컴포넌트가 자주 조작할 필요가 없다.
하지만 때로는 노드에 초점을 맞추거나 스크롤하거나 크기와 위치를 측정하기 위해 React가 관리하는 DOM 요소에 접근해야 할 때가 있는데 이때 ref를 사용한다.

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

💦 컴포넌트의 DOM 노드를 조작하려면?

• 리액트 컴포넌트는 기본적으로 DOM 노드를 노출하지 않는다. 그래서 커스텀한 컴포넌트를 i브라우저 엘리먼트에 접근하는 것처럼 접근하면 에러가난다.
• 이 때 forwardRef를 사용하고 두 번째 ref 인수를 특정 노드에 전달하여 DOM 노드를 노출하도록 설정할 수 있다.

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

📌 ref를 사용해야하는 경우

컴포넌트에서 렌더링 로직에 영향을 미치지 않는 값을 저장하고자 할 때

• timeout ID 저장
•  DOM elements 저장 및 조작
  - input 창 포커스, 스크롤 등
• JSX를 계산하는 데 필요하지 않은 다른 객체 저장

📌 ref 잘 사용하기

• ref를 탈출구로 취급하자. 애플리케이션 로직과 데이터 흐름의 대부분이 ref에 의존하는 경우 접근 방식을 다시 생각해보자.
• 렌더링 중에는 ref.current를 읽거나 쓰지 말자.
• React가 관리하는 DOM 노드는 변경하지 말자.

🔆 ref와 state의 차이

refs	state
useRef(initialValue)는 { current: initialValue }을 반환	useState(initialValue)는 state 변수의 현재값과 state 설정자함수([value, setValue])를 반환
변경 시 리렌더링을 촉발하지 않음	변경 시 리렌더링을 촉발함
Mutable— 렌더링 프로세스 외부에서 current 값을 수정하고 업데이트할 수 있음	“Immutable”— state setting 함수를 사용하여 state 변수를 수정해 리렌더링을 대기열에 추가해야함
렌더링 중에는 current 값을 읽거나 쓰지 않아야 함	언제든지 state를 읽을 수 있음. 각 렌더링에는 변경되지 않는 자체 state snapshot이 있음

💡 대답할 수 있나요?
useRef가 무엇인가요?
ref와 state의 차이는 무엇인가요?
Ref의 용도는 무엇인가요?

이 글은 React 공식문서를 참고하였습니다.