Refs (참조)

React는 기본적으로 state(상태)를 통해 UI를 업데이트하는 구조지만, 때로는 state로 굳이 관리하지 않아도 되는 값이나 DOM 요소 자체에 접근해야 하는 상황이 생긴다.

이때 사용하는 것이 바로 Ref(Reference, 참조)이다.

1. Ref란 무엇인가?

Ref는 말 그대로 특정 요소를 가리키는 참조값.

• useState처럼 React가 관리하는 특별한 값
• 하지만 UI 업데이트를 위한 값이 아니라 DOM 요소(HTML 요소)에 직접 접근할 때 사용하는 값

Ref를 만들기 위한 Hook :

import { useRef } from 'react';

const playerNameRef = useRef();

2. Ref를 JSX 요소에 연결하기

모든 JSX 요소(내장 DOM 요소)는 ref라는 특별한 prop을 지원한다.

<input ref={playerNameRef} />

이렇게 연결하면 :

playerNameRef.current → 해당 input DOM 요소

여기서 핵심은 :

useRef()로 만든 ref 객체는 항상 { current: ... } 형태다.
진짜 값(여기서는 input 요소)은 current에 들어간다.

3. 왜 Ref가 필요할까? (State와의 차이)

보통 input 값 관리할 때는 state로 관리한다.

value={input}
onChange={(e) => setInput(e.target.value)}

하지만 이 방식은 타이핑할 때마다 re-render가 일어난다.

입력값이 단순히 저장만 필요할 때는 굳이 state로 관리할 필요가 없다. 이럴 때 Ref로 읽어오는 방식이 훨씬 단순하다.

4. Ref로 값 읽어오기 (onClick 시점에만 가져오기)

function clickHandler() {
  const entered = playerNameRef.current.value;
  setPlayerName(entered)l
}

이렇게 하면 (1)매 타이핑마다 렌더되지 않고, (2)필요할 때(버튼 클릭 시)에만 값 읽어오고, (3)컴포넌트 코드가 더 간결해진다.

5. 사용 예

기존 방식 : state로 모든 입력 변화 추적했음.

• onChange로 매 입력마다 state 갱신
• state로 value도 관리
• submitted state도 별도로 관리

💫 Ref 방식

const playerNameRef = useRef();
const [playerName, setPlayerName] = useState('');

function handleClick() {
  setPlayerName(playerNameRef.current.value); // DOM에서 직접 가져옴
}

return (
  <>
    <input ref={playerNameRef} />
    <button onClick={handleClick}>Set Name</button>
    <p>{playerName ?? 'Unknown entity'}</p>
  </>
);

• 타이핑할 때 UI가 리렌더링되지 않음
• 버튼 누른 순간에만 이름이 반영됨
• 코드가 더 간단함 (onChange, value props 필요 없음)

6. Ref는 언제 쓰는 게 맞을까?

Ref가 적합한 경우

• input 값이 즉시 UI 업데이트가 필요 없을 때
• 입력값을 한 번에 모아서 가져오고 싶을 때 (예: 폼 제출)
• 특정 DOM 메서드(focus(), scrollIntoView() 등)를 호출해야 할 때
• 애니메이션, 외부 라이브러리, Canvas 조작 등 DOM 직접 접근이 필요할 때

Ref가 적합하지 않은 경우

• 화면에 입력값을 실시간 반영해야 하는 경우 → 반드시 state로 관리!
• 리렌더링이 UI에 필요한 경우

즉, Ref는 React 안에서 DOM을 직접 다뤄야 할 때 가장 중요한 도구다.

---