useRef

📚 Reference

• React useRef

useRef는 컴포넌트 내부에서 렌더링과 상관없이 유지되는 값을 저장하거나, 특정 DOM 요소에 직접 접근할 때 사용하는 React Hook이다.

const refObject = useRef();

• useRef()를 호출하면 refObject라는 Reference 객체가 생성된다.

{
  current: undefined;
}

• 이 객체는 위와 같은 형태를 가진다.
• 레퍼런스 객체는 current 프로퍼티를 통해 값을 저장할 수 있으며, 컴포넌트가 리렌더링되어도 값이 유지된다.

const refObject = useRef();
console.log(refObject.current); // undefined

• 즉, 실제 값은 refObject 자체가 아니라 refObject.current에 저장된다.

useRef의 특징

useRef로 생성한 값은 컴포넌트가 다시 렌더링되어도 유지된다.
하지만 state와 다르게 current 값이 변경되어도 컴포넌트를 다시 렌더링하지 않는다.

const countRef = useRef(0);

countRef.current += 1;

• 위 코드처럼 countRef.current 값이 변경되어도 화면은 자동으로 업데이트되지 않는다.
• React는 ref.current 값의 변경을 화면 업데이트가 필요한 변화로 판단하지 않기 때문이다.

따라서 useRef는 화면에 바로 보여줘야 하는 값보다는,
렌더링과 관계없이 컴포넌트 내부에서 기억해야 하는 값을 저장할 때 사용한다.

예를 들면 다음과 같은 상황에서 사용할 수 있다.

• DOM 요소에 접근해야 할 때
• 이전 값을 저장해야 할 때
• 타이머 ID, 외부 라이브러리 인스턴스처럼 렌더링과 무관한 값을 저장할 때
• 값은 기억해야 하지만 화면을 다시 렌더링할 필요는 없을 때

DOM 요소에 접근하기

useRef는 특정 DOM 요소에 직접 접근할 때도 자주 사용된다.

const textareaRef = useRef(null);

<textarea ref={textareaRef} name="bio" value={bio} onChange={onChange} />;

• 위 코드에서 textareaRef를 textarea의 ref 속성에 연결하면,
  렌더링 이후 textareaRef.current에는 실제 textarea DOM 요소가 저장된다.

console.log(textareaRef.current);

• textareaRef.current를 통해 실제 DOM 요소를 확인할 수 있다.

textareaRef.current.focus();

• 이렇게 접근한 DOM 요소를 이용해 포커스를 주거나, 스크롤 위치를 조정하는 등의 작업을 할 수 있다.

useRef와 useState의 차이

useState와 useRef는 둘 다 컴포넌트 내부에서 값을 기억할 수 있지만,
값이 변경되었을 때 렌더링이 발생하는지 여부가 다르다.

구분	useState	useRef
값 저장	가능	가능
변경 시 리렌더링	발생함	발생하지 않음
화면에 보여줘야 하는 값	적합	부적합
DOM 요소 접근	주로 사용하지 않음	자주 사용함

즉, 화면에 보여지는 값은 useState, 렌더링과 관계없이 기억만 하면 되는 값은 useRef를 사용하면 된다.