3:React Props 완벽 가이드: 부모에서 자식으로 데이터 전달하기

1시간 분량 강의안 (Props 기초)

강의 목표

1. Props의 개념과 역할을 이해한다.
2. Props를 사용하여 컴포넌트 간 데이터를 전달하는 방법을 학습한다.
3. 실습을 통해 Props의 실제 활용 사례를 경험한다.

---

강의 목차

---

1. Props란 무엇인가? (15분)

Props의 정의

• Props는 Properties의 줄임말입니다.
• React에서 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 방법입니다.
• Props는 **읽기 전용(immutable)**입니다. 즉, 자식 컴포넌트에서 변경할 수 없습니다.

Props의 주요 특징

1. 데이터 전달: 부모 컴포넌트가 자식 컴포넌트에 값을 전달.
2. 재사용성: 다양한 데이터로 같은 컴포넌트를 재사용 가능.
3. 읽기 전용: Props는 변경할 수 없으므로 데이터 흐름이 명확.

Props를 사용하는 이유

• 컴포넌트 간의 데이터 흐름을 효율적으로 관리할 수 있습니다.
• 부모 컴포넌트의 상태를 자식 컴포넌트에 전달하여 동적인 UI를 생성할 수 있습니다.

---

2. Props 기본 사용법 (20분)

1단계: 기본 Props 전달

1. 부모 컴포넌트에서 자식 컴포넌트로 Props를 전달:

   function Greeting(props) {
     return <h1>Hello, {props.name}!</h1>;
   }
   
   function App() {
     return <Greeting name="React" />;
   }
   
   export default App;

   
   
   
   
   
   
   • 결과: Hello, React!

 

결과

2단계: 여러 Props 전달

1. Props는 객체 형태로 전달됩니다. 
   • 결과:

2. function Greeting(props) {
       return (
         <div>
           <h1>이름: {props.name}</h1>
           <p>나이: {props.age}</p>
         </div>
       );
     }
   
   function App() {
     return <Greeting name="홍길동" age={25} />;
   }
   export default App;

이름: 홍길동
나이: 25

3단계: 디폴트 Props 설정

• Props가 전달되지 않을 경우 기본값을 설정: 
  • 결과: Hello, Guest!

• function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
  }
  
  Greeting.defaultProps = {
    name: "Guest",
  };
  
  function App() {
    return <Greeting />;
  }
  
  export default App;

---

3. Props를 활용한 컴포넌트 재사용 (15분)

Props로 동적인 UI 생성

1. 버튼 컴포넌트를 Props로 재사용: 
   • 결과: 파란색 버튼과 빨간색 버튼이 생성됩니다.

2. function Button(props) {
     return <button style={{ color: props.color }}>{props.label}</button>;
   }
   
   function App() {
     return (
       <div>
         <Button color="blue" label="확인" />
         <Button color="red" label="취소" />
       </div>
     );
   }
   
   export default App;

Props.children 사용

• 자식 요소를 렌더링하기 위해 props.children을 사용: 
  • 결과:

• function Card(props) {
    return (
      <div style={{ border: "1px solid black", padding: "10px" }}>
        {props.children}
      </div>
    );
  }
  
  function App() {
    return (
      <Card>
        <h1>제목</h1>
        <p>이것은 카드 내용입니다.</p>
      </Card>
    );
  }
  
  export default App;

제목
이것은 카드 내용입니다.

---

4. Props 실습 (10분)

실습 과제

1. 사용자 정보를 받아 "안녕하세요, [이름]! 나이는 [나이]입니다."를 표시하는 컴포넌트를 작성하세요.
2. props.children을 사용해 다양한 내용을 포함할 수 있는 Container 컴포넌트를 만들어 보세요.

예제

• 실습 1번의 예제:

function UserInfo(props) {
  return (
    <div>
      <h1>안녕하세요, {props.name}!</h1>
      <p>나이는 {props.age}입니다.</p>
    </div>
  );
}

function App() {
  return <UserInfo name="홍길동" age={30} />;
}

export default App;

---

5. Q&A 및 정리 (10분)

• Q&A:
  1. Props와 State의 차이점은 무엇인가요?
  2. Props가 없으면 React 컴포넌트를 어떻게 재사용하나요?
• 요약:
  • Props는 부모에서 자식으로 데이터를 전달하는 React의 필수 기능입니다.
  • Props는 읽기 전용이며, 다양한 데이터를 전달해 컴포넌트를 재사용할 수 있습니다.
  • props.children을 사용하면 컴포넌트 안에 HTML 요소나 다른 컴포넌트를 삽입할 수 있습니다.