컴포넌트 해부: 함수형 컴포넌트

핵심 개념

React 컴포넌트는 UI를 반환하는 함수입니다. 대문자로 시작해야 하며 JSX를 반환합니다. props로 데이터를 받고 return으로 UI를 반환합니다. 컴포넌트를 지우며 UI 단위가 어떻게 소멸되는지 확인하십시오.

코드 분석

REACT📋 코드 (27줄)







function TerminatorCard({ model, status }) {
    return (
      <div style={{border:'1px solid #10b981', padding:'12px', marginBottom:'8px'}}>
        <div style={{color:'#10b981', fontWeight:'bold'}}>[{model}]</div>
        <div style={{color:'#888', fontSize:'12px'}}>STATUS: {status}</div>
      </div>
    );
  }

  function App() {
    return (
      <div>
        <div style={{color:'#10b981', marginBottom:'12px', letterSpacing:'0.2em'}}>UNIT REGISTRY</div>
        <TerminatorCard model='T-800' status='ACTIVE' />
        <TerminatorCard model='T-1000' status='TERMINATED' />
        <TerminatorCard model='T-X' status='SCANNING' />
      </div>
    );
  }

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

AI 프롬프트

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

Claude

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

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

ChatGPT

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

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

Gemini

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

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

Grok

무료: Grok 4.1 / SuperGrok $30/mo

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

⭐ 이것만 기억하세요

컴포넌트 해부: 함수형 컴포넌트는 이 3가지만 확실히 잡으세요

1.HTML을 통째로 한 파일에 작성하면 UI가 복잡해질수록 코드가 수천 줄로 불어나서 수정 지점을 찾기 어렵습니다

2.함수형 컴포넌트는 JSX를 반환하는 JavaScript 함수이며, UI를 재사용 가능한 독립 단위로 분리합니다

3.다음 챕터에서 이 컴포넌트에 외부 데이터를 전달하는 Props 시스템을 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 5 / 34

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