React state 란?

React에서 state는 컴포넌트가 관리하는 동적인 데이터를 의미합니다.

컴포넌트의 상태를 나타내며, 값이 변경되면 해당 컴포넌트가 다시 렌더링됩니다.

그렇다면 React state와 일반 변수와의 차이가 뭘까요?

주요 특징:

동적 데이터 관리: 사용자 입력, API 응답 등 변경 가능한 데이터를 저장.

지역적(scope): 각 컴포넌트의 state는 해당 컴포넌트 내부에서만 관리.

불변성(immutability): 직접 수정하지 않고, 항상 setState 또는 state setter 함수로 업데이트.

간단한 예제:

import React, { useState } from 'react'; 
function Counter() { 
  const \[count, setCount\] = useState(0); // count라는 state와 setter 함수 생성 
  return ( 
    <div> 
        <p>현재 카운트: {count}</p> 
        <button onClick={() => setCount(count + 1)}>증가</button> 
    </div> ); 
}

 

count: 현재 상태 값을 저장.

setCount: 상태를 업데이트하기 위한 함수.

 

위의 count를 state대신 일반 변수로 사용했다면, button을 클릭했어도 count의 증가가 바로 화면에 렌더링되지 않고,

새로고침 등으로 재 렌더링을 해줘야 화면에 반영이 될 것 입니다.

요약:

React의 state는 컴포넌트가 "기억"해야 하는 값이며, 상태가 변경되면 컴포넌트가 자동으로 업데이트됩니다.

특징	React State	일반 변수
리렌더링 트리거	값이 변경되면 컴포넌트가 자동으로 다시 렌더링됨	값이 변경되어도 컴포넌트는 다시 렌더링되지 않음
React 의존성	React의 내부 메커니즘과 렌더링 사이클에 종속적	React와 독립적, 단순히 값 저장 및 연산에 사용
데이터 보존	컴포넌트가 렌더링될 때 상태 값이 유지됨	렌더링 시 초기화되며 값을 유지하지 못함
업데이트 방법	setState 또는 state setter 함수로만 변경 가능	직접 값을 재할당하여 변경 가능
사용 목적	UI와 사용자 입력 등 동적인 데이터 관리	단순히 컴포넌트 내부에서 임시로 사용되는 데이터 저장
불변성	직접 변경이 불가능, 항상 새로운 상태로 대체	변경 가능, 값이 바로 업데이트됨