5. props

1. props

리액트에서 props 는 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 사용한다.
props 를 전달하는 컴포넌트가 부모 컴포넌트가 되고, 전달받는 컴포넌트가 자식 컴포넌트이다.
props 는 기본적으로 변경이 불가능하다. 부모 컴포넌트에서만 값을 변경할 수 있다.
값의 변경이 감지되면 리렌더링 된다.

1.1 사용법

function ParentComponent() {
  const message = "안녕하세요!";
  const count = 5;

  return (
    <div>
      <ChildComponent text={message} number={count} />
    </div>
  );
}

코드를 보면, 부모 컴포넌트에서 message, count 변수가 선언되어있고 이것을 자식 컴포넌트로
전달하고 있다. message 변수를 text 라는 이름으로 넘기고, count 변수를 number 라는 이름으로 넘긴 것이다.

function ChildComponent(props) {
  return (
    <div>
      <p>{props.text}</p> {/* "안녕하세요!" 라고 출력 */}
      <p>숫자는 {props.number}입니다.</p> {/* "숫자는 5입니다." 라고 출력 */}
    </div>
  );
}

자식 컴포넌트에서는 매개변수로 props 라고 입력하여 부모가 넘긴 데이터들을 받아서,
. 을 찍어서 사용할 수 있다.