[React] useRef 알아보기 - useRef 와 ref 의 개념 및 사용

React를 개발하다보면 자주 쓰이는 useRef 와 ref라는 녀석에 대해서 알아보자.

 

어떨때 쓰나요?

우선 `useRef` 는 어떤 상황에서 사용할까?

개발을 하다보면 단순히 React JSX Element 만으로는 DOM 을 완벽하게 제어하기 어렵다.

가장 흔하게 예시를 들자면,

사용자가 특정 액션을 했을 때 input element에 focus를 해주어야 한다면 React에서 어떻게 구현해야 할까?

 

useRef를 알고있다면, 해결법은 간단하다.

input element를 ref에 연결하고, ref에 연결된 element를 focus해주면 된다. 

---

ref 가 뭔데요?

ref는 reference의 줄임말이다. 한국말로는 참조정도 되겠다.

ref는 일반 객체다. ref를 console.log 로 찍으면 current property를 가진 객체를 볼 수 있다.

이 객체를 통해 DOM에 직접적인 접근이 가능하다.

---

어떻게 쓰는데요?

function MyComponent() {
  const sampleRef1 = useRef(0);
  const sampleRef2 = useRef(null);
  ...

1. 우선 구성요소의 최상위에 호출한다.

2. ref 객체의 속성이 초기에 지정되기를 원하는 값을 초기값에 넣어주면 된다. 이 값은 초기렌더링 이후 무시되므로 넣지않아도 된다.

3. element에 연결한다.

  // ...
  return <input ref={inputRef} />;

그리고, 아래처럼 inputRef의 current를 통해 inputElement에 접근할 수 있다.

  function handleClick() {
    inputRef.current.focus();
  }

---

주의사항

1. state와 달리 ref에 담긴 값이 변경되더라도 다시 렌더링이 트리거되지 않는다.

즉, ref값이 변경되어도 렌더링이 일어나지 않는다.

ref는 상태가 아니라 참조값이다.

만약, 화면에 표시하려는 정보로 쓰이기 위한 변수를 담기 위해서라면은 state 에 저장하자.

 

2. 렌더링중에는 접근하거나 수정하지 말자.

function MyComponent() {
  // ...
  // 🚩 Don't write a ref during rendering
  myRef.current = 123;
  // ...
  // 🚩 Don't read a ref during rendering
  return <h1>{myOtherRef.current}</h1>;
}

대신, 이벤트 핸들러나 side effect에서 읽거나 쓰자.

function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ You can read or write refs in effects
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ✅ You can read or write refs in event handlers
    doSomething(myOtherRef.current);
  }
  // ...
}

---

근데 왜 current로 접근하나요?

DOM API인 querySelector처럼 DOM요소를 반환해서 쓰면 안되나?

이는 공식문서에서 설명해준다.

컴포넌트가 마운트될 때 React는 current 프로퍼티에 DOM 엘리먼트를 대입하고,
컴포넌트의 마운트가 해제될 때 current 프로퍼티를 다시 null로 돌려놓습니다.
ref를 수정하는 작업은 componentDidMount 또는 componentDidUpdate 생명주기 메서드가 호출되기 전에 이루어집니다.

실제 DOM에 React Node가 렌더링될 때 까지 ref가 가리키는 DOM의 주소값은 확정된 것이 아니다.

즉 우리가 ref에 접근할 수 있는 시점은 React Node가 실제로 DOM에 반영되는 그 시점이다.

 

그리고 가상 DOM이 변경될 때 실제 DOM의 요소도 변경되는 경우가 있기 때문에 DOM이 업데이트되는 경우 ref의 current값이 변경되게 된다.

---

참고자료

https://react.dev/reference/react/useRef

https://tecoble.techcourse.co.kr/post/2021-05-15-react-ref/