✍🏻 Props

props란?

• 컴포넌트의 속성(property)을 의미한다
  • 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성
• 상위 컴포넌트로부터 전달받은 값
  • props를 함수의 전달인자(atguments)처럼 전달
  • React 엘리먼트 반환
  • 컴포넌트가 최초 렌더링될 때에 출력하고자 하는 데이터를 담은 초기값으로 사용 가능
• 객체 형태
  • 어떤 타입의 값도 넣어 전달 가능
• props는 읽기 전용(read-only)
  • 외부로부터 전달받아 변하지 않는 값(side-effect 예방)

props 사용 방법 3단계

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의

<Parent>,<Child> 컴포넌트 선언

function Parent() {
  return (
    <div className="parent">
      <h1>parent</h1>
      <Child />
    </div>
  );
};
function Child() {
  return (
    <div className="child"></div>
  );
};

2. props를 이용하여 정의 된 값과 속성 전달
   React에서 JSX 속성 및 값 할당 방법

<Child attribute={value} />
<Child text={"I'm the eldest child"} />

3. 전달받은 props 렌더링
   props는 객체이므로 객체의 { key : value}로 반환한다.
   <Parent> 컴포넌트에서 정의한 { attribute : value}로 반환한다.

function Child(props) {
  return (
    <div className="child"></div>
    <p>{props.text}</p>
  );
};

그 외 props.children 방법

태그 사이에 value를 넣어 전달

function Parent() {
  return (
    <div className="parent">
        <h1>parent</h1>
        <Child>I'm the child</Child>
    </div>
  );
};
function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};