React - 부모 컴포넌트와 자식 컴포넌트

부모 컴포넌트와 자식 컴포넌트 개념 정리 (완벽 정리)

---

1. 컴포넌트(Component)란?

• React에서 UI를 구성하는 독립적이고 재사용 가능한 코드 조각.
• 함수형(function)과 클래스형(class)이 있지만, 요즘은 함수형 컴포넌트 사용.

---

2. 부모 컴포넌트(Parent Component)

✔ 다른 컴포넌트(자식 컴포넌트)를 포함하는 컴포넌트
✔ 데이터를 자식에게 전달할 수 있음 → props 사용
✔ 상태(state)를 관리하고, 필요하면 자식에게 상태를 내려줄 수 있음

✅ 예제 (부모 → 자식 데이터 전달)

import React from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  return (
    <div>
      <h1>나는 부모 컴포넌트</h1>
      <ChildComponent name="React 초급자" />
    </div>
  );
}

export default ParentComponent;

import React from "react";

function ChildComponent({ name }) {
  return <p>안녕하세요, {name}님!</p>;
}

export default ChildComponent;

➡ 부모가 props를 통해 자식에게 데이터(name="React 초급자")를 전달
➡ 자식이 props를 받아 화면에 표시

---

3. 자식 컴포넌트(Child Component)

✔ 부모로부터 props를 받아서 사용하는 컴포넌트
✔ 부모의 상태(state)를 직접 변경할 수 없음
✔ 부모가 내려준 함수를 실행하여 부모의 상태를 변경 가능

✅ 예제 (자식 → 부모 데이터 전달)

import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [message, setMessage] = useState("");

  const receiveMessage = (childMessage) => {
    setMessage(childMessage);
  };

  return (
    <div>
      <h1>자식이 보낸 메시지: {message}</h1>
      <ChildComponent sendMessage={receiveMessage} />
    </div>
  );
}

export default ParentComponent;

import React from "react";

function ChildComponent({ sendMessage }) {
  return (
    <button onClick={() => sendMessage("안녕하세요, 부모님!")}>
      부모에게 메시지 보내기
    </button>
  );
}

export default ChildComponent;

➡ 자식이 부모가 내려준 sendMessage 함수를 호출하여 부모의 상태 변경
➡ 부모는 setMessage(childMessage)를 실행하여 상태를 업데이트

---

4. 부모-자식 관계 요약

개념	설명
부모 컴포넌트	자식 컴포넌트를 포함하고 데이터를 내려줌 (props)
자식 컴포넌트	부모가 준 데이터를 받아 사용함 (props)
Props	부모 → 자식으로 전달하는 데이터 (읽기 전용)
State	부모가 관리하는 값, 필요하면 자식에게 전달 가능
이벤트 전달	자식에서 부모의 함수를 호출하여 데이터를 부모로 보낼 수 있음

---

5. 반드시 기억해야 할 규칙

✅ 부모 → 자식: props 사용 (단방향 데이터 흐름)
✅ 자식 → 부모: props로 전달된 함수 호출하여 데이터 전달
✅ props는 읽기 전용 (자식에서 변경 불가!)
✅ 부모는 상태를 관리하고, 자식은 상태를 받아서 렌더링하는 역할

---

이제 이 내용을 반복해서 코드로 직접 실습하면 자연스럽게 익숙해질 거야! 🚀