React useState vs 일반 변수 : 차이 쉽게 이해하기

1. 들어가기

• React를 배우면 제일 먼저 나오는 게 useState
• 여기서 두 가지 방법을 비교해보자.

 

 

2. 코드 예시

Body.js

import { useState } from "react";
import "./Body.css";

function Body({ name, age, favorList = [], children }) {

  const [count, setCount] = useState(0);
 
  function onIncrease() {
    setCount(count + 1);
    console.log(count);
  }

  let countTest = 0;

  function onIncrease2() {
    countTest++;
    console.log(countTest);
  }


  return (
    <>
      <h1>count값 : {count}</h1>
      <button onClick={onIncrease}>+</button>

      <h1>countTest값 : {countTest}</h1>
      <button onClick={onIncrease2}>countTest 증가버튼</button>
    </>
  );
}

export default Body;

 

 

3. 차이점 정리

• useState (count)
  • React가 관리하는 특별한 값
  • 값이 변하면 컴포넌트를 다시 렌더링 → 화면도 자동 업데이트
  • 업데이트는 비동기적으로 처리돼서 console.log는 이전 값이 보일 수 있음
• 일반 변수 (countTest)
  • 그냥 JS 변수
  • 값은 변하지만 React가 모름 → 화면은 그대로
  • console.log에서는 증가가 보이지만 화면 숫자는 안 바뀜

 

👉  결론

• 화면에 보여주고 싶으면 useState를 써야 함
• 단순 계산/임시 값 저장이라면 일반 변수도 OK