useState와 useRef의 공통점과 차이점.

우연히 아티클을 하나 보았는데, useState와 useRef를 비교하는 글이었다. 두 개념이 다른데 비교가 될 수 있는 것인가? 라는 생각에 아티클을 읽던 중 충분히 비교함직한 내용이었고, 이를 기반으로 구글에 검색하여보니 이미 많은 분들이 두 개에 대한 차이를 고민하며 글을 올려두었다. 내가 두 개념이 다르다고 단정지었던 부분은 useRef가 DOM에 관련하여서만 사용되는 줄 알았기 때문인데, 나름대로 공부한 것을 정리해보고자 한다.

---

useState란

먼저 useState란 변수를 동적으로 수정하고, 이에따라 dom을 리랜더링시키기 위하여 사용되는 react hook 중 하나이다. useState는 다음과 같이 상태값(count)과 그 값을 갱신하는 함수(setCount)를 반환하도록 구성되어있다. 

const [count, setCount] = useState(0);

값을 갱신하는 함수 setCount는 갱신할 값을 받아 컴포넌트의 리랜더링 큐에 집어넣게 되고, 다음 랜더링 시에 이를 반환하면서 항상 최신의 값이 유지될 수 있도록 해준다.

setCount(count + 1);

React는 setState 함수 동일성이 안정적이고 리렌더링 시에도 변경되지 않을 것이라는 것을 보장한다. 이것은 useEffect나 useCallback 의존성 목록에 이 함수를 포함하지 않아도 무방한 이유가 된다.

https://ko.reactjs.org/docs/hooks-reference.html#usestate

https://hyermione.tistory.com/55

[뷰쟁이의 리액트 시작하기] react useState로 변수를 선언해보자

 

useRef란

useRef는 다음과 같은 형식으로 사용한다.

const refContainer = useRef(initialValue);

useRef는 .current 프로퍼티를 가지고 있으며, 전달된 인자(initialValue)로 초기화된다. 이후, refContainer에는 변경 가능한 ref 객체가 반환되어 저장된다. 반환된 객체(refContainer)는 컴포넌트의 전 생애주기를 통해 유지된다. 또한 반환된 객체는 순수자바스크립트 객체이다.

이는 일반적인 use case인데, 보면 useRef(null)을 이용하여 inputEl.current의 초기값을 null로 변경시켰다. 이후, <input> 태그가 랜더링되면서, inputEl.current에는 <input> 태그가 저장된다. 이러한 과정을 거쳐 최종적으로 버튼을 눌렀을 때에는 inputEl.current에 저장되어있는 <input>에 포커스가 가는 원리이다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useRef는 매 랜더링 시, 동일한 ref 객체를 제공한다. 객체를 수정하는 것이기 때문에 그 내용이 변경될 때는 따로 알려주지 않는다. 고로 .current 프로퍼티가 변경된다고 해서 리랜더링이 발생하지 않게된다.

혹시 ref의 값을 attach 혹은 detach 할 때, react 공식문서는 콜백ref 사용을 추천한다.

결론적으로 useRef는 .current 프로퍼티가 있는 객체를 가지고 있는 것이기 때문에 변경 가능한 어떤 값을 넣어 사용해도 무방하다. 그게 useState에 저장되어야 할 변수라고 하더라도 말이다. 그렇지만 일반적으로 dom 정보를 넣어 사용한다.

---

결론적으로

• useState와 useRef는 어떤 값을 저장할 때 사용된다.
• useState는 저장된 값에 따라 랜더링이 필요할 때, 사용하는게 더 맞다.
• useState는 시간에 따라 변할 수 있는 값에 추천된다.
• useRef는 객체를 반환하기 때문에 변경을 디텍팅 할 수 없고, 이에 따라 랜더링이 필요하지 않을 때 사용하는게 더 맞다.
• useRef는 시간에 따라 변하지 않는, 변하더라도 굳이 체크할 필요가 없는 값에 추천된다.
• useRef는 매랜더링 시 만드는 고비용 값을 저장할 때 사용된다. (예를들어 DOM)
• 다만, useRef를 남발하여 사용하는 것은 안된다. (react 공식홈페이지에서 추천하지 않음)