useState 해부: 상태 관리 시스템

핵심 개념

useState는 컴포넌트 내부 상태를 관리하는 Hook입니다. [state, setState] 배열을 반환하며, setState 호출 시 컴포넌트가 리렌더링됩니다. 상태가 변하면 UI가 자동으로 업데이트됩니다. useState를 지우며 상태 시스템이 어떻게 붕괴되는지 확인하십시오.

코드 분석

REACT📋 코드 (34줄)







const { useState } = React;

  function EnergyCore() {
    const [energy, setEnergy] = useState(100);
    const [status, setStatus] = useState('ACTIVE');

    const consume = () => {
      setEnergy(prev => {
        const next = Math.max(0, prev - 10);
        if (next === 0) setStatus('TERMINATED');
        return next;
      });
    };

    return (
      <div>
        <div style={{color: energy > 50 ? '#22c55e' : energy > 20 ? '#f59e0b' : '#10b981', fontSize:'24px', marginBottom:'8px'}}>
          ENERGY: {energy}%
        </div>
        <div style={{color:'#888', marginBottom:'12px'}}>STATUS: {status}</div>
        <button onClick={consume} style={{background:'#10b981', color:'#080808', border:'none', padding:'8px 16px', cursor:'pointer', fontFamily:'monospace'}}>
          CONSUME ENERGY
        </button>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<EnergyCore />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React 'useState' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'useState'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React 'useState' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React 'useState' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

useState 해부: 상태 관리 시스템은 이 3가지만 확실히 잡으세요

1.일반 변수를 바꿔도 React가 화면을 다시 그리지 않기 때문에 사용자는 변경을 볼 수 없습니다

2.useState는 [값, 설정함수] 쌍을 반환하며, 설정함수를 호출해야만 React가 리렌더링을 트리거합니다

3.다음 챕터에서 API 호출·타이머 같은 부수 효과를 처리하는 useEffect를 배웁니다

💬 이 챕터 질문 보기

REACT · CH.7 — 질문하거나 답변을 확인하세요

→

진행도 7 / 34

← 커리큘럼으로 ← 목록으로 (React)