React 기초 08 · useRef
useRef - 안 그려도 기억하는 메모
바꿔도 화면을 다시 그리지 않는 메모장. DOM 요소를 직접 잡거나, 리렌더 없이 값을 보관할 때 써요.
1
먼저 비유로
화면엔 안 보이는 메모장이에요
state가 "바뀌면 화면을 다시 그리는 칠판"이라면, ref는 주머니 속 메모장이에요. 적어도 화면은 그대로예요. 그래서 두 가지에 좋아요. 하나는 진짜 화면 요소(DOM)를 잡아두는 손잡이(예: 입력칸에 포커스 주기), 다른 하나는 화면을 다시 그릴 필요 없는 값(예: 직전 값, 타이머 id)을 조용히 기억하는 거예요.
ref.current에 값이 들어 있어요. 이걸 읽고 쓰는 건 자유지만, 바꿔도 화면은 다시 안 그려져요. 이게 state와의 결정적 차이예요.
2
직접 해보기
DOM 잡기 + 직전 값 기억
A에서 버튼이 입력칸 DOM을 잡아 포커스를 줘요. B에서 +1을 누르면 "지금"과 "직전" 값이 보이는데, 직전 값은 ref에 조용히 적어둔 거예요.
직접 만져보세요
A. DOM 요소 직접 잡기
버튼이 inputRef.current(진짜 input DOM)를 잡아 .focus()를 불러요.
B. 리렌더 없이 값 보관 (직전 값 기억)
지금 (state)0
직전 (ref)0
+1을 누르면 지금은 새 값, 직전은 한 박자 전 값을 보여줘요. 직전 값은 ref에 조용히 적어둔 거라, 그 갱신만으로는 화면이 다시 그려지지 않아요.
B의 +1을 여러 번 눌러 '지금'과 '직전'이 한 박자 차이 나는 걸 보세요.
핵심은 이거예요
ref는 바꿔도 화면을 다시 그리지 않는 값이에요. DOM을 직접 잡을 때, 또는 렌더와 상관 없는 값을 기억할 때 쓰고, 화면에 보여줄 값은 state로 두세요.
3
흐름으로 보기
ref가 DOM을 잡는 순서
- 1useRef(null)로 빈 메모(ref.current = null)를 만들어요.
- 2<input ref={inputRef} /> 처럼 요소에 ref를 붙여요.
- 3화면이 그려지면 React가 inputRef.current에 진짜 DOM을 넣어줘요.
- 4이제 버튼에서 inputRef.current.focus() 같은 DOM 조작을 할 수 있어요.
4
코드로 보기
딱 이만큼이에요
function NameField() { const inputRef = useRef(null); // 처음엔 null // 렌더 후 React가 inputRef.current에 진짜 <input> DOM을 넣어준다 return ( <> <input ref={inputRef} /> <button onClick={() => inputRef.current.focus()}> 포커스 </button> </> );}5
조심하세요
처음에 꼭 헷갈리는 것
- 화면에 보여줄 값을 ref에 두기. ref를 바꿔도 화면이 안 바뀌어요. 보여줄 값은 반드시 state로.
- 렌더 도중 ref.current를 읽어 DOM을 만지기. 첫 렌더 땐 아직
null이에요. DOM 접근은 이벤트나 useEffect 안에서 하세요. - state로 충분한 걸 굳이 ref로 하기. ref는 "화면과 무관한 값"이나 "DOM 손잡이"에 쓰는 특수 도구예요. 기본은 state입니다.