Props 해부: 데이터 전달 시스템

핵심 개념

Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법입니다. 읽기 전용이며 자식에서 변경 불가합니다. defaultProps로 기본값을 설정할 수 있습니다. props를 지우며 데이터 흐름이 어떻게 끊기는지 확인하십시오.

코드 분석

REACT📋 코드 (27줄)







function MissionBrief({ target, priority = 'MEDIUM', location }) {
    return (
      <div style={{border:'1px solid #333', padding:'12px', marginBottom:'8px'}}>
        <div style={{color:'#10b981'}}>TARGET: {target}</div>
        <div style={{color:'#f59e0b', fontSize:'12px'}}>PRIORITY: {priority}</div>
        <div style={{color:'#888', fontSize:'12px'}}>LOCATION: {location || 'UNKNOWN'}</div>
      </div>
    );
  }

  function App() {
    return (
      <div>
        <MissionBrief target='JOHN CONNOR' priority='CRITICAL' location='LOS ANGELES' />
        <MissionBrief target='SARAH CONNOR' location='CYBERDYNE HQ' />
        <MissionBrief target='MILES DYSON' priority='HIGH' />
      </div>
    );
  }

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

AI 프롬프트

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

Claude

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

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

ChatGPT

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

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

Gemini

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

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

Grok

무료: Grok 4.1 / SuperGrok $30/mo

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

⭐ 이것만 기억하세요

Props 해부: 데이터 전달 시스템은 이 3가지만 확실히 잡으세요

1.컴포넌트 안에 데이터를 하드코딩하면 같은 UI를 다른 데이터로 재사용할 수 없습니다

2.Props는 부모가 자식에게 전달하는 읽기 전용 객체이며, 자식은 props를 직접 수정할 수 없습니다

3.다음 챕터에서 컴포넌트가 스스로 데이터를 관리하고 변경하는 useState를 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 6 / 34

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