속성(Props)

Props는 Properties의 줄임말로, React 컴포넌트에서 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하기 위해 사용하는 객체입니다. Props는 읽기 전용(Read-only) 속성을 가지며, 컴포넌트 간의 데이터 흐름을 단방향으로 유지하게 만듭니다.

---

왜 Props를 사용하는가?

1. 컴포넌트 간 데이터 전달
   • 부모에서 자식 컴포넌트로 데이터를 전달하기 위해 사용됩니다. 이를 통해 컴포넌트 간에 동적으로 데이터를 주고받을 수 있습니다.
2. 재사용성 증가
   • Props를 사용하면 동적으로 데이터에 따라 랜더링할 수 있으므로 컴포넌트를 더 유연하고 재사용 가능하게 만듭니다.
3. UI의 동적 업데이트
   • Props를 통해 전달된 데이터가 변경되면 해당 데이터를 사용하는 자식 컴포넌트가 자동으로 업데이트 됩니다.

---

Props 사용방법

1. Props 전달

부모 컴포넌트에서 자식컴포넌트로 데이터를 전달합니다.

function ParentComponent() {
  return (
    <ChildComponent name="John" age={30} />
  );
}

 

2. Props 사용

자식 컴포넌트에서는 전달받은 Props를 사용합니다.

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

 

2-1. 구조 분해 할당으로 Props 사용

Props 객체를 구조 분해 할당하여 더 간결하게 사용할 수도 있습니다.

function ChildComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

---

Props의 특징

1. 읽기 전용 데이터
   • 자식 컴포넌트는 Props를 수정할 수 없습니다. Props는 불변이며, 데이터를 수정하려면 부모 컴포넌트에서 상태를 변경해야합니다. 
2. 단방향 데이터 흐름
   • Props는 부모에서 자식으로만 전달됩니다. 자식에서 부모로 데이터를 전달하려면 콜백함수를 사용할 수 있습니다.
3. Default Props
   • Props가 전달되지 않았을 경우 기본값을 설정할 수 있습니다.

function Greeting({ message = "Hello, World!" }) {
  return <h1>{message}</h1>;
}

---

Props를 활용한 이벤트 전달

부모 컴포넌트에서 자식 컴포넌트로 콜백 함수를 Props로 전달하여 자식 컴포넌트에서 부모의 상태를 업데이트할 수 있습니다.

function ParentComponent() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return <ChildComponent onButtonClick={handleClick} />;
}

function ChildComponent({ onButtonClick }) {
  return <button onClick={onButtonClick}>Click Me</button>;
}