[ vite+React 기초학습 6] React State 기본 개념과 사용법

State란 무엇인가

State는 컴포넌트 내부에서 변할 수 있는 데이터를 의미합니다. 예를 들어, 버튼을 눌렀을 때 숫자가 증가하거나 텍스트가 바뀌는 것처럼 사용자와 상호작용하는 데이터가 State입니다. State가 바뀌면 자동으로 화면이 다시 그려집니다.

기본 개념

• React에서 상태 관리를 위해 useState 훅 사용
• 상태 변경 시 컴포넌트가 다시 렌더링 됨
• State는 컴포넌트 내부에서 선언, 관리됨

주요 사용 위치/상황

• 사용자 입력 처리(폼, 버튼 클릭 등)
• 화면에 동적으로 변하는 데이터를 표시할 때

구체적 코드 예시

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

핵심 요점 정리

• State는 컴포넌트 내부 데이터의 변화 저장소
• useState로 선언하고 set함수로 변경
• 변경 시 자동으로 화면이 업데이트 됨

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.