[React] Ref란? (useRef)

JINJIN·2023년 12월 15일

React ref

React

목록 보기

8/10

React Ref 그리고 useRef에 대해서 알아봅니다.

ref와 DOM

리액트에서 ref는 특정 DOM 요소나 리액트 엘리먼트에 직접 접근하기 위한 수단입니다. 주로 DOM을 직접 조작할 필요가 있을 때 사용됩니다.

리액트에서는 일반적으로 선언적인 방식을 통해 UI를 구현하고, DOM을 직접 조작할 필요는 거의 없습니다. 리액트는 가상 DOM을 사용하여 효율적으로 UI를 업데이트하며, 대부분의 UI 변화는 상태(state)와 props를 통해 자동으로 처리됩니다.

그러나 특정 상황에서는 직접적인 DOM 접근이 필요할 수 있는데, 이때 ref가 유용하게 사용됩니다.

ref를 사용해야 하는 상황

입력 포커스 관리
- 특정 입력 필드에 자동으로 포커스를 맞추고자 할 때, 예를 들어 모달 창이 열렸을 때 첫 번째 입력 필드에 포커스를 맞추는 경우.
애니메이션
- DOM 요소에 애니메이션 효과를 직접 적용해야 할 때, 예를 들어 요소의 위치를 애니메이션으로 부드럽게 이동시키는 경우.
외부 라이브러리와의 통합
- jQuery 플러그인, D3.js, Video.js와 같은 외부 라이브러리를 사용하여 DOM 요소를 조작해야 할 때.

이 외에도 스크롤 위치 조작, Canvas 요소 사용 등에 ref를 유용하게 사용할 수 있습니다.

주의사항

ref를 사용하여 DOM을 직접 조작하는 것은 리액트의 선언적인 패러다임과 다소 어긋나므로, 꼭 필요한 경우에만 사용해야 합니다.
또한 직접적인 DOM 조작은 리액트의 렌더링 사이클 및 상태 업데이트와 충돌을 일으킬 수 있으므로 주의해서 사용해야 합니다.

useRef

그렇다면 리액트에서 ref를 사용하려면 어떻게 해야 할까요? useRef는 함수형 컴포넌트에서 ref를 사용할 수 있게 해주는 훅입니다.

useRef는 리액트의 훅 중 하나로, 주로 두 가지 목적으로 사용됩니다. DOM 요소에 직접 접근하기 위해서, 그리고 렌더링 사이에 데이터를 유지하기 위해서입니다.

기본적인 사용법

useRef를 사용하면 ref 객체를 생성할 수 있습니다. 이 ref 객체는 .current 속성을 가지고 있으며, 이 속성을 통해 ref가 가리키는 값을 얻거나 설정할 수 있습니다.

const myRef = useRef(initialValue);

initialValue는 ref 객체의 초기값입니다. myRef.current를 통해 이 값을 얻거나 업데이트할 수 있습니다.

DOM 요소에 접근

useRef는 DOM 요소에 직접 접근할 때 자주 사용됩니다. 예를 들어, 특정 입력 필드에 포커스를 맞추거나, DOM 요소의 크기나 위치를 읽어야 할 때 유용합니다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // `.current`는 input 요소의 DOM 노드를 가리킵니다.
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

렌더링 간의 값 유지

useRef는 컴포넌트가 렌더링될 때마다 초기화되지 않는 "박스"처럼 작동합니다. 이를 사용하여 렌더링 사이에 값을 유지할 수 있습니다. 이 때 중요한 점은 ref의 값이 변경되어도 컴포넌트가 리렌더링되지 않는다는 것입니다.

function TimerComponent() {
  const count = useRef(0);

  useEffect(() => {
    setInterval(() => {
      count.current = count.current + 1;
      console.log(count.current);
    }, 1000);
  }, []);

  // `count.current` 값이 변경되어도 컴포넌트는 리렌더링되지 않습니다.
}