React Hooks - useRef

useRef는 current 프로터피로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다.

반환된 객체는 컴포넌트의 전 생애주기를 통틀어 유지될 것입니다.

본질적으로 useRef는 current 프로퍼티에 변경 가능한 값을 담고있는 상자와 같습니다.

리액트 공식문서

useRef?

리액트는 상태값의 변화에 의존해 렌더링을 한다.

다만 상태값이 바뀌게 되면 리액트는 무조건 리렌더링을 하게 되며, 로직 상에서 리렌더링이 굳이 필요없는 경우에는 난처한 경우를 맞이할 수도 있다.

useRef를 사용하게 되면 useState와 달리 렌더링에 변화를 끼치지 않는 변수를 관리할 수 있다.

useRef의 사용

1. 컴포넌트안에서의 변수 생성

위에서 서술하였듯이 useRef를 통해 관리하는 변수는 컴포넌트의 리렌더링을 일으키지 않는다.
상태값의 경우에는 상태를 업데이트하고 리렌더링을 거쳐야 업데이트된 상태값을 사용할 수 있지만,
useRef는 current 프로퍼티를 통해 변화 이후 바로 사용할 수 있는 상태가 된다.

const example = () => {
  const [stateCount, setStateCount] = useState(0);
  const refCount = useRef(0);
  
  return (
    <div>
      <div>
        <p>{stateCount}</p>
        <button onClick={()=>setStateCount(prev => prev+1)}>state+1</button>
      </div>
      <div>
        <p>{refCount}</p>
        <button onClick={()=>refCount.current+1}>ref+1</button>
      </div>
    </div>
  );
}

위 예제에서 상태값카운트를 올리게 되었을 때 상태값이 변화함과 동시에 리액트는 리렌더링을 실행한다.
DOM은 변화를 감지하여 1이 더해진 stateCount를 화면에 보여준다.

하지만 refCount값은 버튼을 눌러도 화면이 변화하지 않고 초기값인 1이 보여질 것이다.
useRef를 이용하여 관리하는 변수는 리렌더링을 불러오지 않고 그 값만이 올라가게 된다.
만약 이 상태에서 stateCount값을 올리게 되면 리렌더링이 일어나게되고,
그때서야 버튼을 누른만큼 증가된 refCount값이 화면에 보여질 것이다.

만약 화면에 보여질 필요없는 변수가 필요할 때 useRef의 특성을 이용하면 리액트 내에서 불필요한 리렌더링을 줄일 수 있게 되며, 성능향상에 도움이 될 것이다.

2. 특정 DOM 선택

바닐라JS에서 돔을 조작해야 될 때는 document.querySelector와 같은 셀렉터 메소드를 사용해야 했었다.
리액트에선 Hook이 출시되기 이전의 클래스형 컴포넌트에서는 React.createRef가 이를 대신하였지만 함수형 컴포넌트에선 useRef를 이용하면 된다.

const example = () => {
  const exampleInput = useRef();
  console.log(exampleInput.current.value); 
  // expected : useRef 접근하기!
  
  return (
    <div>
      <input ref={exampleInput} value="useRef 접근하기!" />
    </div>
  );
}

이와 같이 useRef로 DOM을 가지고 와서 current 프로퍼티를 이용하면 DOM요소에 직접 접근할 수 있게된다.