useRef (React)

오늘은 useRef hook을 정리해 보려고 한다.

React 컴포넌트는 상태에 변화가 생길때 마다 리 렌더링(reRendering)이 된다.

import React, { useState } from 'react';

const CounterExample() => {
  const [count, setCount] = useState(0);
  console.log('reRender');
  
  const plusCount = () => {
    setCount(prevState => prevState + 1);
  };
  
  return (
    <>
      <h1>{count}</h1>
      <button onClick={plusCount}>1 더하기</button>
    </>
  );
}

위와같이 컴포넌트를 만들어 보면, 1 더하기버튼을 누를때 마다, 콘솔창에 reRender 라고 찍힐 것이다.
이는 컴포넌트 함수가 다시 실행되면서 리 렌더링이 된다는 것을 뜻한다.

useRef

useRef는 기본적으로 다음과 같이 선언한다.

const ref = useRef(defaultState);

그러면 ref에는 다음과 같은 object가 할당된다.
{ current: defaultState }
처음에 넣은 defaultState라는 초기값이 current라는 key에 value로 들어있다.

만약 defaultState를 바꿔주고 싶으면 아래와 같이 하면된다.

ref.current = 'changeState';

console.log(ref) // { current: 'changeState'}

이 반환된 ref는 컴포넌트가 unMount 될때 까지 유지를 한다.

useRef로 만든 counter 예제

아래 예제를 만들어 보면 위의 내용을 이해할 수 있다.

import React, { useRef } from 'react';

export default function App() {
  const countRef = useRef(0);

  const plusCount = () => {
    countRef.current += 1;
  };

  return (
    <div className="App">
      <h1>{countRef.current}</h1>
      <button onClick={plusCount}>1 더하기</button>
      <button onClick={() => {console.log(countRef.current)}}>콘솔</button>
    </div>
  );
}

위의 예제를 작성후 1 더하기 버튼을 아무리 눌러도 숫자는 0에서 바뀌지 않는다.
그 이유는 위에 설명한 것 같이 useRef는 컴포넌트를 reRendering하지 않기 때문이다.

콘솔 버튼을 눌러보면 Console로 숫자의 변화를 확인 할 수 있다.
만약 컴포넌트가 reRendering되면 숫자는 1 더하기 버튼을 누른 숫자(countRef.current의 값)만큼 변화해 있을 것이다.

useRef를 이용한 DOM 요소 접근

useRef를 이용하면 DOM 요소에 직접 접근할 수 있다.
useRef를 사용해서 반환된 object를 접근하고자 하는 태그의 ref속성으로 주면 된다.

const ref = useRef(value);

<input ref={ref} />

만약 페이지가 렌더링될때 input 요소에 focus를 주고 싶으면 아래와 같이 작성하면 된다.

import React, { useEffect, useRef } from 'react';

const Example = () => {
  const ref = useRef();
  
  useEffect(() => {
    ref.current.focus();
  }, []);
  
  return (
    <>
      <input ref={ref} type="text" />
    </>
  );
}

---

참고자료

DaleSeo - React Hooks: useRef 사용법
별코딩 - useRef 완벽정리 1# 변수관리
별코딩 - useRef 완벽정리 2# DOM 요소 접근