[React] useState vs useRef vs Variable

useState vs useRef vs Variable

useState 의 state 그리고 useRef 의 ref 와 리액트 내부의 변수가 렌더링에 따라 어떤 식으로 변화할까

세 가지 버튼으로 각각 state/ ref / var 값을 올리는 컴포넌트를 구성

• 값의 변화 없이 컴포넌트 리렌더링을 위해서 하나의 버튼을 더 만듦

→ 각 버튼을 클릭하면서 해당 값의 변화 관찰

import { useRef, useState } from "react";
const Comparing = () => {
  const [countState, setState] = useState(0);
  const [render, setRender] = useState(0);
  const countRef = useRef(0);
  let countVar = 0;
  const countUpState = () => {
    setState(countState + 1);
    console.log("State: ", countState);
  };
  const countUpRef = () => {
    countRef.current = countRef.current + 1;
    console.log("Ref: ", countRef.current);
  };
  const countUpVar = () => {
    countVar = countVar + 1;
    console.log("Variable: ", countVar);
  };
  const reRender = () => {
    setRender(render + 1);
  };

  return (
    <>
      <h1>State: {countState}</h1>
      <h1>Ref: {countRef.current}</h1>
      <h1>Variable: {countVar}</h1>
      <button onClick={countUpState}>State UP!</button>
      <button onClick={countUpRef}>Ref UP!</button>
      <button onClick={countUpVar}>Variable UP!</button>
      <button onClick={reRender}>렌더링!</button>
    </>
  );
};
export default Comparing;