TIL. useState vs useRef

useState와 useRef의 공통점

useState와 useRef의 기능상의 공통점은 함수형 컴포넌트에서 동적으로 상태 관리를 할 수 있게 해준다는 점이다.

예시로, 버튼이 클릭되었을 때 주어진 state를 Human!이라는 string으로 변환하는 동일한 프로그램을 useState와 useRef를 통해 아래와 같이 다르게 구현할 수 있다.

import React,{useState} from 'react';

const Test=()=>{
  const [letter,setLetter]=useState('');
  const onClick=()=>{
    setLetter('Human!');
  };
  return(
    <div>
    <button onClick={onClick}>Human?</button>
    <b>{letter}</b>
    </div>
    );
};
export default Test;

import React,{useRef} from 'react';

const Test2=()=>{
  letter.current='Human!';
  console.log(letter.current);
};
return(
  <div>
  <button onClick={onClick}>Human?</button>
);
};
export default Test2;

useState와 useRef 모두 주어진 state를 변화시킬 수 있다.
"왜 useState 구현에서는 Human!이라는 글씨를 화면에 띄워서 값이 변한 것을 확인했는데, useRef의 구현에서는 console에 log를 찍어 확인할까?"

useState와 useRef의 차이점

useRef를 사용한 구현에서 글씨를 화면에 띄우지 않은 것은 useState와는 다르게 useRef는 state를 변화시킨 후에 component를 re-render하지 않는다

즉, useRef를 사용한 구현에서 state를 변화시키더라도 변화 후에 re-render되지 않아 initial value로 나타날 것이기에 rendering을 할 수는 있지만 변화했다는 의미가 존재하지 않아 따로 화면에 띄우지 않은 것이다.

그러나, useState는 업데이트되면 re-rendering process가 진행된다.

각각의 state에서 이용할 hook을 설계할 때, 주로 state의 rendering여부를 바탕으로 결정하는 것이 좋다. Rendering이 필요한 state는 useState를 이용하는 것이 간편하게 상태관리를 할 수 있고, rendering이 필요하지 않은 state의 경우 useRef를 쓰는 것이 간편하게 코드를 작성할 수 있다

참고:https://medium.com/humanscape-tech/react-usestate-vs-useref-4c20713f7ef