2025-10-04 16:00

Tags: 리액트 넥스트

useRef

• 리렌더링을 유발하지 않고 값을 저장하거나 DOM 요소에 직접 접근하기 위한 React 훅이다.
• 리액트 컴포넌트의 생명주기 동안 유지되는 .current 프로퍼티를 가진 객체를 반환하며, 이 값을 변경해도 화면은 다시 그려지지 않는다.
• 주로 포커스 관리, 미디어 재생, DOM 요소 크기 측정 등 선언적 방식만으로 해결하기 어려운 명령형 프로그래밍 작업에 사용된다.

특징	useState	useRef
주목적	컴포넌트의 상태 관리. 이 값은 UI에 직접적으로 영향을 줌.	참조(Reference) 값 관리. DOM 요소 참조 또는 리렌더링을 유발하지 않는 값 저장.
리렌더링 유발	상태 변경 함수(setState)가 호출되면 반드시 리렌더링을 예약함.	.current 프로퍼티를 변경해도 절대 리렌더링하지 않음.
값의 변경	setState 함수를 통해 비동기적으로 업데이트됨.	.current 프로퍼티에 직접 할당하여 동기적으로 업데이트됨.
값의 접근	[value, setValue]에서 value를 직접 사용.	ref.current를 통해 접근.
언제 사용해야 하는가	화면에 보이는 모든 데이터, 사용자의 인터랙션으로 변경되어 UI가 업데이트되어야 하는 모든 것.	• DOM 요소에 명령형으로 접근해야 할 때 • 이전 상태/props 값을 저장할 때 • 타이머 ID, 구독(subscription) 등 렌더링과 무관한 값을 관리할 때

1. DOM 참조: input 포커싱, 요소 크기 측정 등 명령형 DOM 조작이 필요할 때 사용한다.
2. 인스턴스 변수: 리렌더링을 유발하지 않으면서 값을 기억해야 할 때 (e.g., 타이머 ID, 이전 값) 사용한다.
3. .current: 모든 마법은 가변적이고 영속적인 .current 프로퍼티에서 일어난다. 이것의 변경은 리렌더링을 유발하지 않는다.

언급한 노트 (Outgoing Links)

• 명령형 프로그래밍
• 리액트 컴포넌트
• 리액트 넥스트
• useState
• DOM

백링크 (Backlinks)

• React useRef 완벽 정복 가이드 렌더링을 지배하는 자