[react 번역] useRef

출처: https://react.dev/reference/react/useRef

---

개요

useRef는 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 React Hook입니다. DOM 노드, 값, 인스턴스 등 렌더링과 무관한 정보를 저장할 때 사용합니다.

const ref = useRef(initialValue)

---

Reference

useRef(initialValue)

컴포넌트의 최상위에서 useRef를 호출하면 ref 객체를 생성할 수 있습니다.

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
  // ...
}

파라미터

• initialValue: ref 객체의 current 속성에 최초로 할당할 값. 어떤 타입이든 가능하며, 최초 렌더 이후에는 무시됩니다.

반환값

• current 속성만 가진 객체. 최초에는 initialValue가 할당되며, 이후에는 원하는 값으로 변경할 수 있습니다. JSX의 ref 속성에 전달하면 React가 DOM 노드를 할당해줍니다.

---

주의사항 및 Caveats

• ref.current는 자유롭게 변경할 수 있지만, state와 달리 변경해도 컴포넌트가 리렌더링되지 않습니다.
• ref.current를 렌더링 중에 읽거나 쓰지 마세요(초기화 목적 외에는). 예측 불가능한 동작이 발생할 수 있습니다.
• Strict Mode에서는 컴포넌트 함수가 두 번 호출될 수 있습니다(개발 환경 전용). ref 객체도 두 번 생성되지만, 하나는 폐기됩니다.

---

사용법

값 참조용 ref

import { useRef } from 'react';

function Stopwatch() {
  const intervalRef = useRef(0);
  // ...
}

• ref는 렌더 사이에 값을 보존할 수 있습니다(일반 변수는 렌더마다 초기화됨).
• ref를 변경해도 화면이 갱신되지 않으므로, 렌더링에 영향을 주지 않는 정보에 적합합니다.

DOM 조작용 ref

import { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>포커스 이동</button>
    </>
  );
}

• ref 객체를 JSX의 ref 속성에 전달하면, 해당 DOM 노드가 current에 할당됩니다.
• DOM 조작, 포커스 이동, 스크롤 등 imperative 동작에 활용할 수 있습니다.

ref 내용 재생성 방지

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
  // ...
}

• ref의 초기값은 최초 한 번만 사용됩니다. 값이 비싼 객체라면 위와 같이 조건문으로 한 번만 생성하세요.

---

트러블슈팅

커스텀 컴포넌트에 ref 전달이 안 되는 경우

• 기본적으로 ref는 DOM 노드에만 연결됩니다. 커스텀 컴포넌트에 ref를 전달하려면, 해당 컴포넌트에서 ref를 prop으로 받아 내부 DOM에 전달해야 합니다.

function MyInput({ value, onChange, ref }) {
  return <input value={value} onChange={onChange} ref={ref} />;
}

---

출처: https://react.dev/reference/react/useRef