[React] React에서 ref란? 정말 꼭 써야 할까?

React를 공부하다 보면 한 번쯤 만나게 되는 ref. 많은 사람들이 이렇게 말하죠.

“ref는 DOM에 접근할 수 있게 해주는 훅이다.”

정확한 설명입니다. 하지만 여기서 끝내기엔 너무 아쉽습니다.
그럼 도대체 왜 DOM에 접근해야 할까요? 상태(state)나 props로는 부족한 걸까요?
이 글에서는 그런 궁금증들을 차근차근 풀어보려 합니다.

1️⃣ ref란 무엇인가?

React에서 ref는 특정 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 수 있게 해주는 방법입니다.
useRef() 훅을 사용하거나, 클래스형 컴포넌트에서는 createRef()로 생성합니다.

import { useRef, useEffect } from 'react';

function Example() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // 컴포넌트가 마운트된 후 input에 포커스
  }, []);

  return <input ref={inputRef} />;
}

2️⃣ 그런데… DOM에 접근은 왜 필요한 걸까?

React는 선언형 UI를 지향합니다. 즉, 상태를 바꾸면 화면이 자동으로 바뀌는 구조입니다.
그렇다면 굳이 직접 DOM에 접근할 이유가 있을까요?

✅ DOM 접근이 필요한 상황들

상황	설명
자동 포커스	예: 페이지가 열리자마자 특정 input에 커서 두기
스크롤 조작	예: 채팅창이 새 메시지 도착 시 자동으로 맨 아래로 내려가기
크기/위치 측정	예: 특정 요소의 offsetTop을 기반으로 UI 위치 조정
버튼 중복 클릭 방지	실제 DOM 버튼을 직접 disable 처리
외부 라이브러리 사용	예: Swiper, Chart.js 같은 DOM 조작 기반 라이브러리
비제어 컴포넌트 값 가져오기	input에 입력된 값을 직접 읽어야 할 때

❗ 왜 상태(state)로 안 되는가?

상태는 변경 → 렌더링이라는 흐름으로 동작합니다.
하지만 포커스를 주거나, 즉시 DOM 위치를 계산하거나, 외부 라이브러리와 연동하는 경우엔 이 흐름보다 먼저 DOM을 직접 제어해야 할 필요가 생깁니다.
이럴 땐 상태로는 부족하고, ref를 통해 실 DOM에 접근해야만 합니다.

3️⃣ ref는 어떻게 동작할까?

ref는 컴포넌트가 렌더링되고 DOM이 마운트된 후에 .current에 실제 DOM을 할당합니다.
즉, ref.current에 접근 가능한 시점은 useEffect 안입니다.

useEffect(() => {
  console.log(ref.current); // 여기서부터 DOM 접근 가능
}, []);

4️⃣ ref는 어떻게 사용하는가?

기본 방식: useRef()

const ref = useRef(null);
return <div ref={ref}></div>;

콜백 ref 방식

const setRef = (el) => {
  if (el) {
    el.scrollIntoView(); // DOM이 연결되는 순간 처리
  }
};

return <div ref={setRef}></div>;

 콜백 ref는 DOM이 연결되거나 해제될 때마다 호출되기 때문에,

• 여러 개의 DOM 요소를 동적으로 참조할 때
• DOM이 변경될 때마다 처리할 동작이 있을 때 유용합니다.

5️⃣ 그럼 DOM에 접근하는 방법은 ref밖에 없을까?

React에서는 직접 DOM에 접근할 수 있는 공식적이고 권장된 방법은 ref뿐입니다.
물론 document.querySelector()나 getElementById() 같은 전통적인 방법도 사용할 수는 있지만, React의 Virtual DOM 구조를 무시하는 행위이기 때문에 권장되지 않습니다.

// ❌ 비권장 방식
useEffect(() => {
  document.getElementById("my-input")?.focus();
}, []);

이 방식은 유지보수에 취약하고, React의 재렌더링 흐름과 충돌할 수 있습니다.

마무리 정리

질문	답변
ref는 무엇인가요?	DOM이나 컴포넌트 인스턴스에 직접 접근할 수 있게 해주는 React 훅
왜 DOM에 접근해야 하나요?	상태로 제어할 수 없는 포커스, 스크롤, 위치 측정, 외부 라이브러리 등 직접 조작이 필요한 경우
ref는 언제 접근 가능한가요?	컴포넌트가 마운트된 후 useEffect 안에서
ref 외에 다른 방법은 없나요?	document.querySelector() 등은 가능하지만, React 구조에선 ref가 유일하고 안전한 방법

 

💡 React는 최대한 선언형으로 개발하되, 필요한 순간엔 ref를 통해 안정적으로 DOM을 제어하는 방법을 사용하세요!