<div id="readability-page-1" class="page"><div>
 <div id="SE-0ca84224-453b-4685-92a7-d2e62b993bcc">
 4부 "탈출구(Escape Hatches)"에 들어왔습니다. 지금까지는 전부 React 패러다임 안쪽의 이야기였습니다. state를 바꾸면 React가 화면을 다시 그려주는, 깔끔하고 예측 가능한 세계였죠. 하지만 가끔은 그 세계 바깥과 연결해야 합니다. 입력창에 포커스를 주거나, 특정 위치로 스크롤하거나, 브라우저 API를 직접 만지는 일처럼요. 이번 챕터에서 배울 **useRef**가 그 첫 번째 탈출구입니다.​​ref — 렌더링과 무관한 값을 기억하기useRef는 두 가지 용도가 있습니다. 먼저 렌더링에 영향을 주지 않는 값을 기억하는 용도부터 봅시다.​"값을 기억하려면 state를 쓴다"고 배웠습니다. 그런데 state에는 한 가지 특징이 있었죠. 바뀌면 화면을 다시 그린다. 그런데 기억은 하고 싶지만 화면과는 상관없는 값도 있습니다. 예를 들어 타이머의 ID, 이전 값, 외부 라이브러리 인스턴스 같은 것들요. 이런 값에 useState를 쓰면 불필요한 재렌더가 생깁니다. 이때 쓰는 게 useRef입니다.
 </div> <div id="SE-5c1b4c22-88e8-4c68-a39e-9164c70811ab">
 import { useRef } from 'react';

function Stopwatch() {
 const intervalRef = useRef&lt;number | null&gt;(null); // 렌더와 무관한 값

 function handleStart() {
 intervalRef.current = setInterval(() =&gt; {
 // ...
 }, 1000);
 // intervalRef.current를 바꿔도 재렌더되지 않는다
 }
}
 </div> <div id="SE-cb537956-1506-42bb-8ecf-b62f97bdf1b4">
 useRef(초기값)은 { current: 초기값 } 모양의 객체를 돌려줍니다. 값은 항상 .current로 읽고 씁니다. 그리고 핵심은 이겁니다. ref.current를 바꿔도 컴포넌트는 재렌더되지 않습니다.​​ref와 state, 무엇이 다른가?둘 다 "렌더 사이에 값을 기억"하지만 성격이 정반대입니다.
 </div> <div id="SE-a7671c48-ac6b-4782-9ee1-97f244846c8c">
 <table>
 <tbody><tr><td colspan="1" rowspan="1">
 
 
 </td><td colspan="1" rowspan="1">
 state (useState)
 
 </td><td colspan="1" rowspan="1">
 ref (useRef)​
 
 </td></tr><tr><td colspan="1" rowspan="1">
 바꾸면 재랜더?
 
 </td><td colspan="1" rowspan="1">
 된다
 
 </td><td colspan="1" rowspan="1">
 안된다.
 
 </td></tr><tr><td colspan="1" rowspan="1">
 어떻게 바꾸나?
 
 </td><td colspan="1" rowspan="1">
 setState로만
 
 </td><td colspan="1" rowspan="1">
 ref.current에 직접 대입
 
 </td></tr><tr><td colspan="1" rowspan="1">
 언제 쓰나
 
 </td><td colspan="1" rowspan="1">
 화면에 보여야 하는 값
 
 </td><td colspan="1" rowspan="1">
 화면과 무관한 값
 
 </td></tr></tbody>
 </table>
 </div> <div id="SE-c6237d85-684b-4db6-b9a8-07c665dfce66">
 판단 기준은 단순합니다. 이 값이 바뀌었을 때 화면이 바뀌어야 하면 state, 아니면 ref. 화면에 표시되는 카운터는 state, 화면에 안 보이는 타이머 ID는 ref입니다.​​DOM 노드에 접근하기useRef의 두 번째 용도, 그리고 더 자주 쓰는 용도가 바로 DOM 노드 접근입니다. React는 보통 우리가 DOM을 직접 만질 일이 없게 해주지만, 포커스·스크롤·크기 측정처럼 명령형으로 다뤄야 하는 작업도 있습니다.​방법은 두 단계입니다. ref를 만들어 JSX의 ref 속성에 연결하면, React가 그 DOM 노드를 ref.current에 넣어줍니다.
 </div> <div id="SE-f73f8e8b-4980-4226-b5ad-f1e4c66da2b9">
 import { useRef } from 'react';

function SearchBox() {
 const inputRef = useRef&lt;HTMLInputElement&gt;(null); // ① ref 만들기

 function handleClick() {
 inputRef.current?.focus(); // ③ DOM 노드의 메서드를 직접 호출
 }

 return (
 &lt;div&gt;
 &lt;input ref={inputRef} /&gt; {/* ② ref 속성에 연결 */}
 &lt;button onClick={handleClick}&gt;검색창으로 이동&lt;/button&gt;
 &lt;/div&gt;
 );
}
 </div> <div id="SE-b9188873-263d-47fc-9121-3d539dadc682">
 버튼을 누르면 입력창에 포커스가 갑니다. inputRef.current가 실제 &lt;input&gt; DOM 노드라서, 브라우저의 focus() 메서드를 직접 부를 수 있는 거죠.​TypeScript 메모: DOM용 ref는 useRef&lt;HTMLInputElement&gt;(null)처럼 요소 타입을 제네릭으로 주고 초기값을 null로 둡니다(처음 렌더 시점엔 아직 DOM이 없으니까요). 그래서 사용할 때는 inputRef.current?.focus()처럼 **옵셔널 체이닝(?.)**으로 null을 안전하게 넘깁니다. &lt;div&gt;는 HTMLDivElement, &lt;button&gt;은 HTMLButtonElement처럼 요소마다 타입이 다릅니다.
 </div> <div id="SE-71b560c6-474e-4955-9453-6058a17d1a96">
 React 19 — 자식 컴포넌트에 ref 넘기기
 </div> <div id="SE-f015efb3-1585-4741-b099-5e87e96e56b2">
 ​&lt;input ref={...}&gt;처럼 HTML 태그에는 ref를 바로 연결할 수 있습니다. 그런데 내가 만든 컴포넌트(&lt;MyInput ref={...}&gt;)에 ref를 넘기려면 예전에는 forwardRef라는 별도 장치로 감싸야 했습니다.​React 19부터는 그럴 필요가 없습니다. ref를 그냥 일반 prop처럼 받으면 됩니다.
 </div> <div id="SE-de390011-897b-49a8-80f8-cb086c6d0562">
 // React 19 — ref를 평범한 prop으로 받는다
function MyInput({ ref, ...props }: { ref?: React.Ref&lt;HTMLInputElement&gt; }) {
 return &lt;input ref={ref} {...props} /&gt;;
}

function Form() {
 const inputRef = useRef&lt;HTMLInputElement&gt;(null);
 return (
 &lt;div&gt;
 &lt;MyInput ref={inputRef} /&gt; {/* 내 컴포넌트에도 ref를 그냥 넘긴다 */}
 &lt;button onClick={() =&gt; inputRef.current?.focus()}&gt;포커스&lt;/button&gt;
 &lt;/div&gt;
 );
}
 </div> <div id="SE-64b0fba9-67a8-4b45-9fd8-5725a4fac0ac">
 옛 자료에서 보이는 forwardRef는 React 19에서 deprecated 되었습니다(아직 동작은 합니다). 새 코드에서는 위처럼 ref를 일반 prop으로 받으면 됩니다.
 </div> <div id="SE-ded5a28e-7f25-4a01-8829-2794f6eae597">
 ​ref는 "탈출구"인 만큼, 남용하면 React의 장점을 잃습니다. 두 가지를 조심하세요.​① ref로 state를 대체하지 마라. 화면에 반영되어야 하는 값을 ref에 넣으면, 값은 바뀌어도 화면이 갱신되지 않습니다.
 </div> <div id="SE-274a2403-07cb-4cdc-8fbf-04cba32a6b9a">
 // 🔴 화면에 보여야 하는 값을 ref에 — 숫자를 바꿔도 화면이 그대로다
const countRef = useRef(0);
function handleClick() {
 countRef.current++; // 재렌더가 안 되니 화면은 0 그대로
}
 </div> <div id="SE-82f345d6-3eee-43bc-b460-5e34fe73d00c">
 화면에 보여야 하는 카운터라면 ref가 아니라 state가 맞습니다. "화면이 바뀌어야 하나?"를 먼저 물으세요.​​② 렌더링 중에는 ref.current를 읽거나 쓰지 마라. ref 조작은 6장에서 배운 부수효과입니다. 그러니 렌더링 본문이 아니라 이벤트 핸들러나 Effect 안에서 다뤄야 합니다. 렌더링 함수는 순수하게 유지하는 게 원칙이니까요.
 </div> <div id="SE-f9cfa352-596f-440a-be2d-c1fa24b1b52c">
 function Component() {
 const ref = useRef(0);
 ref.current = ref.current + 1; // 🔴 렌더링 중 ref 조작 — 피한다
 // ...
}
 </div> <div id="SE-59525930-8c0b-4f91-9a0b-902bf96ebef6">
 ​<ul><li>useRef는 렌더링과 무관한 값을 기억하거나, DOM 노드에 접근할 때 쓴다.</li><li>값은 항상 .current로 읽고 쓴다. ref.current를 바꿔도 재렌더되지 않는다.</li><li>화면이 바뀌어야 하면 state, 아니면 ref.</li><li>DOM 접근은 ref를 만들어 ref 속성에 연결하고, ref.current로 focus()·scroll 같은 명령형 작업을 한다. TypeScript에서는 useRef&lt;HTMLInputElement&gt;(null) + 옵셔널 체이닝(?.).</li><li>React 19부터 자식 컴포넌트에도 ref를 일반 prop으로 넘긴다. forwardRef는 더 이상 필요 없다.</li><li>ref로 state를 대체하지 말고, 렌더링 중에 ref.current를 만지지 마라.</li></ul>​ref로 React 바깥의 DOM을 직접 만지는 법을 배웠습니다. 그런데 외부 세계와의 연결에는 더 큰 주제가 있습니다. 네트워크 요청, 구독, 브라우저 API처럼 컴포넌트를 외부 시스템과 동기화하는 일이죠. 다음 챕터에서 그 도구인 useEffect를 배웁니다. 많은 입문자가 가장 어려워하면서 가장 많이 오용하는 훅이라, 처음부터 제대로 잡아보겠습니다.
 </div> <div id="SE-548a6ae1-f97c-47db-b68c-b219350ef8f0">
 ​<ul><li>Referencing Values with Refs — React 공식 문서 (확인: 2026-06-14)</li><li>Manipulating the DOM with Refs — React 공식 문서 (확인: 2026-06-14)</li><li>React v19 — ref as a prop — React 공식 블로그, 2024-12-05</li></ul>
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

4부 "탈출구(Escape Hatches)"에 들어왔습니다. 지금까지는 전부 React 패러다임 안쪽의 이야기였습니다. state를 바꾸면 React가 화면을 다시 그려주는, 깔끔하고 예측 가능한 세계였죠. 하지만 가끔은 그 세계 바깥과 연결해야 합니다. 입력창에 포커스를 주거나, 특정 위치로 스크롤하거나, 브라우저 API를 직접 만지는 일처럼요. 이번 챕터에서 배울 **useRef**가 그 첫 번째 탈출구입니다. ref — 렌더링과 무관한 값을 기억하기 useRef는 두 가지 용도가 있습니다. 먼저 렌더링에 영향을 주지 않는 값을 기억하는 용도부터 봅시다. "값을 기억하려면 state를 쓴다"고 배웠습니다. 그런데 state에는 한 가지 특징이 있.......

useRef — 렌더와 무관한 값, 그리고 DOM 직접 다루기

댓글