React State & Props

props란?

• 컴포넌트의 속성(property)을 의미합니다.
• 상위 컴포넌트에서 하위컴포넌트로 값을 전달할때 사용합니다.
• props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.
• props는 변하지 않는 값입니다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체입니다.

간단정리
props라는 건 택배물품하고 비슷하지 않을까? 우리가 사이트에서 주문한 물품은 배달되는 동안은 취소도 변경도 불가능한 상태이고 사이트(부모)->나(자식)에게로 전달 받는 물품이라 생각한다.
하지만 배송전에는 뭐든 넣을 수 있으니 객체타입을 갖는다! 요정도로 생각해본다.

props를 사용하는 3단계

• 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
• props를 이용하여 정의된 값과 속성을 전달한다.
• 전달받은 props를 렌더링한다.

< Child attribute={value} /> 기본문법

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App"
      <Learn text={itemOne}/>  
      <Learn text={itemTwo}/>
    </div>
  );
};

const Learn = (props) => {
  return <div className="Learn">
    <p>{props.text}</p> //props를 렌더링하는 것
  </div>;
};

export default App;

//props.children라는 것도 존재한다