[React] Props(프롭스)란?

리액트 Props(프롭스)란?

Props는 "properties"의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 데이터입니다.
함수의 매개변수처럼, 컴포넌트에 값을 넘겨주고, 자식 컴포넌트는 그 값을 받아서 화면에 표시하거나 로직에 사용할 수 있습니다.
props는 읽기 전용이며, 자식 컴포넌트에서 직접 값을 변경할 수 없습니다.

---

Props 사용법

1. 부모 컴포넌트에서 값 전달

function Parent() {
  return <Child name="김강현" age={30} />;
}

• name과 age라는 props를 Child 컴포넌트에 전달합니다.
• 문자열은 따옴표("), 숫자나 변수, 객체는 중괄호({})로 감쌉니다.

2. 자식 컴포넌트에서 props 받기

function Child(props) {
  return (
    <div>
      <p>이름: {props.name}</p>
      <p>나이: {props.age}</p>
    </div>
  );
}

• 함수의 첫 번째 인자로 props 객체를 받습니다.
• props.이름으로 전달받은 값을 사용할 수 있습니다.

3. 구조분해 할당으로 props 받기

function Child({ name, age }) {
  return (
    <div>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </div>
  );
}

• props 객체에서 필요한 값만 바로 꺼내서 사용할 수 있어 코드가 더 간결해집니다.

4. 변수/객체/배열도 전달 가능

function Parent() {
  const user = { name: "김강현", age: 30 };
  return <Child user={user} />;
}

function Child({ user }) {
  return (
    <div>
      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
    </div>
  );
}

5. props를 활용한 컴포넌트 재사용

function Button({ label, color }) {
  return <button style={{ color: color }}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="저장" color="blue" />
      <Button label="취소" color="red" />
    </div>
  );
}

• props를 다르게 주면 같은 컴포넌트도 다양한 역할을 할 수 있습니다.

---

정리

• props는 부모 → 자식 방향으로 데이터를 전달하는 통로입니다.
• props는 읽기 전용입니다(자식에서 직접 변경 불가).
• props를 활용하면 컴포넌트를 더 재사용성 있게 만들 수 있습니다.
• props는 컴포넌트의 "함수 인자"와 같은 역할을 합니다.

Tip: props의 타입을 명확히 하고 싶다면 PropTypes 또는 TypeScript를 활용할 수 있습니다.
(예시: Child.propTypes = { name: PropTypes.string.isRequired };)