State (스테이트)

 

🟡 State

React 컴포넌트 내부에서 유지 및 변경 가능한 데이터를 관리하는 객체.

컴포넌트의 '기억 장치' 역할을 하며, 사용자 상호작용이나 네트워크 응답 등에 따라 동적으로 변하는 값들을 저장한다.

 

◼️ 주요 특징

• 변경 시 자동 리렌더링: State 값이 변경되면 React는 해당 컴포넌트를 자동으로 다시 렌더링(Re-rendering)한다. 화면을 실시간으로 업데이트하는 핵심 메커니즘이다.
• 컴포넌트 내부 관리: 외부(부모)로부터 전달받는 Props와 달리, State는 해당 컴포넌트 내부에서 직접 생성하고 관리한다.
• 불변성(Immutability) 유지: State는 직접 수정해서는 안 되며, 반드시 React가 제공하는 상태 변경 함수(Setter)를 통해서만 업데이트해야 한다.

 

◼️ 구조

useState는 배열을 반환한다.

useState('초기값') 함수를 실행하면 크기가 2인 배열(Array)을 리턴하며, 보통 개발자가 이름을 지정해 구조 분해 할당으로 사용한다.

• 인덱스 0 (count): 현재의 상태 값을 읽는 변수. (데이터)
• 인덱스 1 (setCount): 현재의 상태를 변경하는 함수. (일반적으로 set + 상태이름 규칙으로 명명)

 

◼️ 사용하는 이유 (일반 변수와의 차이)

일반 변수(let, const)는 내부적으로 값이 변경되어도 React가 이를 감지하지 못해 화면이 갱신되지 않는다.

// ❌ 잘못된 예시: 일반 변수 사용
const Counter = () => {
  let count = 0; 
  
  const plus = () => {
    count = count + 1;
    console.log(count); // 콘솔에서 값은 증가하지만, 화면(UI)은 0에 멈춰 있음
  }
  
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={plus}>+</button>
    </div>
  );
}

• 반면 State를 사용하면 값이 바뀔 때마다 React가 UI를 새 데이터로 자동 갱신한다.

 

◼️ State 기본 사용 방법 (useState Hook)

함수형 컴포넌트에서는 useState 함수를 사용하여 상태를 선언한다.

import React, { useState } from 'react';

function Counter() {
  // 구조 분해 할당을 통해 [현재 값, 변경 함수]를 반환받음
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

 

 

📍  POINT 📍 

✔️ React에서 State는 웹 페이지를 동적으로 움직이게 하는 핵심 기능이다. ✔️

✔️ 사용자 입력이나 서버 응답처럼 언제든 바뀔 수 있는 데이터는 State로 관리해야 한다. ✔️

✔️ 지정된 변경 함수를 거쳐 안전하게 업데이트해야만 화면에 최신 상태가 올바르게 반영된다. ✔️

 

 

📋 Props vs State 차이점 📋

구분	Props (프롭스)	State (스테이트)
개념	컴포넌트 외부(부모)로부터 입력받는 속성 값	컴포넌트 내부에서 생성하고 관리하는 상태 값
가변성	읽기 전용 (불변) / 자식 내에서 수정 불가	수정 가능 / 변경 함수를 통해 업데이트 가능
공통점	데이터가 갱신되면 컴포넌트 함수가 다시 실행되면서 새로운 UI를 리턴(렌더링)합니다.