[React] Prop

1. Prop을 사용해서 코드를 재사용하자!

Props

리액트 공식 문서
👉 https://ko.reactjs.org/docs/components-and-props.html

네가 만들고 사용하는 컴포넌트들은 "()" 괄호로 argument(인자)를 받는다.
ReactJS는 자동으로 입력한 모든 property(props)들을 Object 안으로 넣는다.
이 오브젝트는 컴포넌트의 인자로 주어진다.

🤔 Prop를 통해 컴포넌트에 객체를 전달할 수 있다.

컴포넌트에 className에 대한 props을 인계하고, 
자식 컴포넌트의 className에 값을 할당시켜 
css로 간단하게 스타일링도 진행할 수 있겠다는 생각이 들었다.
React의 재사용성에 대해서 다시 한번 감탄하는 강의였다.

🤔 Btn 함수의 return에서 버튼의 style을 지정하는데
왜 중괄호를 2번씩 써야 하는 것인가요?

✅ ES6 문법으로 prop을 좀 더 간결하게 가져올 수 있다.

function Btn(props) {
      return <button onClick={props.ChangeValue}>{text}</button>;
    }

                   ⬇️

function Btn({ text, changeValue }) {
      return <button onClick={changeValue}>{text}</button>;
    }

✅ 컴포넌트에 넣는 이벤트 리스너는 이벤트 리스터를 할당한 것이 아니다. 이벤트 리슨어는 htm의 어트리뷰터에 설정해야지만 이벤트가 할당된 것이다.

✅ 부모의 상태를 바꾸는 함수를 만들고, 이 함수를 실행할 때, 자식이 실행하도록 진행했다.

2. memo 쓸데없는 렌더링을 줄여준다.

부모에 변화가 생겨도 모든 자식 컴포넌트에 변화가 생기는 것이 아니다.
이때 memo를 활용하면 변화가 생긴 자식 컴포넌트만 랜더링이 일어난다.

3. Prop types

protypes 를 이용해서 prop에 잘못 들어오는 타입을 확인할 수 있다.

    Btn.propTypes =
      {text: PropTypes.string};
    const MemorizedBtn = React.memo(Btn);
    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <Btn text={12} changeValue={changeValue} />
          <Btn text={value} />
        </div>
      );12
    }

👇type error문을 확인할 수 있다.