[React] Props 부모 -> 자식

my_react_app.zip

0.18MB

 

 

 

❓ 왜 자식 컴포넌트를 따로 만들고, 부모에서 불러서 사용하는 걸까?

 

나누지 않았을 때                                                                       나눴을 때

코드가 점점 길어짐	재사용하기 쉬움
똑같은 걸 반복해야 함	필요한 부분만 고치면 됨
이해하기 어려움	역할이 나뉘어 더 쉬움

 

 

• 자식 컴포넌트 = 반찬통
  • 필요한 반찬(기능)을 따로 만들고
• 부모 컴포넌트 = 도시락
  • 그걸 모아서 도시락(화면)을 구성하는 거예요

"코드를 반찬처럼 쪼개서 저장통에 담아두면,
나중에 **다른 도시락(화면)**에서도 쉽게 꺼내쓸 수 있어요.
코드를 정리하기도 쉽고, 재사용도 편하고, 보기에도 좋아요!"

 

 

src/
├── pages/
│   └── PropsPracticePage.tsx   ← 연습용 페이지
├── components/props_practice_page/
│   └── StudentCard.tsx         ← 자식 컴포넌트

 

 

// src/components/props_practice_page/StudentCard.tsx
import React from "react";

// 🧒 자식 컴포넌트가 받을 값의 이름(name)과 그 타입(string)을 정해요
interface StudentCardProps {
  name: string; // name은 문자열(string)이어야 해요
}

// 👇 StudentCard라는 자식 컴포넌트를 만들어요
// (부모로부터 name이라는 값을 받아서 사용해요)
const StudentCard: React.FC<StudentCardProps> = ({ name }) => {
  return (
    <div style={{ border: "1px solid black", padding: "1rem", marginTop: "1rem" }}>
      <h3>📛 학생 카드</h3>
      {/* 받은 name 값을 화면에 보여줘요 */}
      <p>이름: {name}</p>
    </div>
  );
};

// 이 컴포넌트를 다른 파일에서도 쓸 수 있도록 내보내요
export default StudentCard;

 

부모가 주는 것                                                                                    자식이 받는 방법                  자식이 사용하는 방법

<StudentCard name="홍길동" />

props.name

이름: {name}

 

 

// src/pages/PropsPracticePage.tsx
import React, { useState } from "react";
import StudentCard from "../components/props_practice_page/StudentCard";

// 👨‍🏫 부모 컴포넌트
const PropsPracticePage: React.FC = () => {
  // 🧠 학생 이름을 저장할 공간(상태)을 만들어요
  const [studentName, setStudentName] = useState("");

  // ✏️ 사용자가 input에 글자를 입력하면 실행되는 함수
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 입력한 값을 상태에 저장해요
    setStudentName(e.target.value);
  };

  return (
    <div style={{ padding: "2rem" }}>
      <h2>🧪 Props 연습 페이지</h2>
      <p>학생의 이름을 입력해보세요:</p>

      {/* 사용자가 이름을 입력할 수 있는 입력창 */}
      <input
        type="text"
        placeholder="이름을 입력하세요"
        value={studentName} // 상태 값이 input에 반영돼요
        onChange={handleChange} // 글자가 바뀔 때마다 handleChange가 실행돼요
        style={{ padding: "0.5rem", marginBottom: "1rem" }}
      />

      {/* StudentCard 컴포넌트에 이름을 전달해요 */}
      <StudentCard name={studentName} />
    </div>
  );
};

// 이 페이지를 다른 곳에서 쓸 수 있게 내보내요
export default PropsPracticePage;

 

 

라우팅 추가하기 

App.tsx 또는 routes.tsx 파일에서 이 페이지로 이동할 수 있게 추가하세요:

<Route path="/props_practice" element={<PropsPracticePage />} />

 

 

📊 그림으로 쉽게 이해

┌────────────────────────────┐
│      PropsPracticePage     │ ← 부모 컴포넌트
│  ┌──────────────────────┐  │
│  │ input                 │  │ ← 이름 입력
│  │                      ↓  │
│  │ <StudentCard name="홍길동" /> │
│  └──────────────────────┘  │
└────────────┬───────────────┘
             │
             ▼
  ┌───────────────────────────┐
  │       StudentCard         │ ← 자식 컴포넌트
  │   이름: 홍길동             │
  └───────────────────────────┘

 

개념                         설명

props	부모가 자식에게 값(데이터)을 주는 통로
interface	자식이 받을 값의 이름과 타입을 미리 약속하는 문서
useState	입력값 같은 데이터를 실시간으로 저장하고 반영하는 React 함수