React Props

---

📦 Props란?

정의

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 읽기 전용 데이터다.

부모가 내려준 값을 자식이 받아서 화면에 표시하거나 동작에 활용한다.

🧩 필요성과 역할

• 상태를 한 곳에서 관리하고 아래로 전달할 수 있다.
• 같은 데이터를 여러 컴포넌트에서 중복으로 만들지 않아도 된다.
• 컴포넌트 간 데이터 흐름을 명확하게 만들 수 있다.
• 자식 컴포넌트의 재사용성이 좋아진다.

🛠️ 전달 방법

부모에서 전달

<AppChild name={name} age={age} />

자식에서 받기

export default function AppChild({ name, age }) {
  return (
    <>
      <p>{name}</p>
      <p>{age}</p>
    </>
  );
}

🔁 함수 Props

• 부모의 상태를 바꾸는 함수를 자식에게 함께 내려줄 수 있다.
• 자식은 전달받은 함수를 호출해서 부모 상태를 변경할 수 있다.

<AppChild
  name={name}
  age={age}
  onChangeName={(newName) => setName(newName)}
/>

export default function AppChild({ onChangeName }) {
  return (
    <button onClick={() => onChangeName("tom")}>이름 바꾸기</button>
  );
}

🧪 예시

이름과 나이 전달

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("david");
  const [age, setAge] = useState(15);

  return (
    <>
      <h1>App</h1>
      <p>{name}</p>
      <p>{age}</p>
      <AppChild name={name} age={age} />
    </>
  );
}

export default function AppChild({ name, age }) {
  return (
    <>
      <h2>AppChild</h2>
      <p>{name}</p>
      <p>{age}</p>
    </>
  );
}

상태 변경 함수 전달

import { useState } from "react";
import FriedChicken from "./components/FriedChicken";

export default function App() {
  const [title, setTitle] = useState("치킨은 맛있다.");
  const [salt, setSalt] = useState(30);

  return (
    <>
      <h1>App</h1>
      <p>{title}</p>
      <p>{salt}</p>
      <FriedChicken
        title={title}
        salt={salt}
        onChangeSalt={(newSalt) => setSalt(newSalt)}
      />
    </>
  );
}

⚠️ 주의점

• Props는 자식이 직접 수정하는 값이 아니다.
• 값이 자주 바뀌는 상태는 부모에서 관리하는 편이 좋다.
• 전달하는 값이 많아지면 구조를 다시 점검해야 한다.

📌 정리

• Props는 부모에서 자식으로 데이터를 전달하는 방식이다.
• 읽기 전용이라는 점이 중요하다.
• 함수 Props를 사용하면 자식에서 부모 상태 변경도 연결할 수 있다.

---

연결문서

• React-Component
• React-JSX
• React-EventHandler
• React-Fragment