React JS Props

4.0 Props

• 부모 컴포넌트가 자식 컴포넌트에게 정보를 전달하는 방법
• 컴포넌트를 재사용 가능하도록 만들어주기

✍ JSX로 컴포넌트의 style 변경하기

    function SaveBtn() {
      return (
        <button
          style={{
            backgroundColor: "pink",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}

          Save Changes
        </button>
      );
    }

동일한 스타일 속성을 복붙하지 않고 적용하려면?

  <script type="text/babel">
    function Btn({ text, big }) {
      return (
        <button
          style={{
            backgroundColor: "pink",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            margin: 5,
            fontSize: big ? 16 : 12,
          }}
        >
          {text} //
        </button>
      );
    }
    function App() {
      return (
        <div>
          <Btn text="Save Changes" big />
          <Btn text="Confirm" />
        </div>
      );
    }

• App() 컴포넌트는 <Btn /> 컴포넌트 2개를 불러옴.
• <Btn /> 컴포넌트의 property는 object 형태로 Btn()의 인수로 들어감
• Btn()의 ( ) 안에 props의 key 값을 object 형태로 넣어서 함수 안에서 자유롭게 사용 가능
  왜 text는 {text}인데 big은 {big}이 아닌가..

📌 컴포넌트들이 공통으로 갖고있는 요소와 각각 다른 속성을 갖고있는 요소 파악해야함

4.1 Props & Memo

✍ 부모 컴포넌트의 state가 변경되었을 때 자식 컴포넌트의 속성 변경하기

    function Btn({ text, onClick }) {
      return (
        <button
          onClick={onClick}
          style={{
            backgroundColor: "pink",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            margin: 5,
          }}
        >
          {text}
        </button>
      );
    }
    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Change");
      return (
        <div>
          <Btn text={value} onClick={changeValue} />
          <Btn text="Confirm" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

• props로 string, boolean 뿐만 아니라 function도 전달 가능
• <Btn /> 컴포넌트의 props onClick은 changeValue라는 함수를 값으로 가지고 있음
• prop onClick을 Btn()의 인수로 전달(수기로 해줘야함)
• Btn()이 반환하는 <button> 태그에 eventListener(onClick)를 추가한 후 prop onClick을 전달함 -> 클릭 이벤트가 발생하면 changeValue 함수 실행

📌 <Btn /> 컴포넌트의 prop onClick은 eventListenr가 아님 (반드시 실제 자식 컴포넌트의 해당 element에 eventListener 추가해줘야함)

---

*{key}와 key의 차이

    function Btn({ text, onClick }) {
      console.log({text}); 
      // {text: 'Save Changes'} 
      // {text: 'Confirm'}
      return (
        <button
          onClick={onClick}>
          {text}
        </button>
      );
    }

• props object 그대로 출력

    function Btn({ text, onClick }) {
      console.log(text); // 'Save Changes', 'Confirm' 출력
      return (
        <button
          onClick={onClick}>
          {text}
        </button>
      );
    }

• props object에서 text라는 key값의 value 출력

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

위와 같은 의미!

React.memo()
onClick 이벤트로 state 값이 바뀌면 App()의 자식 컴포넌트 전체가 re-render됨
=> ✍ 부모 컴포넌트의 state가 변경되었을 때 props가 변경되지 않은 자식 컴포넌트는 다시 render하지 않도록 하기

    const MemorizedBtn = React.memo(Btn);
    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Change");
      return (
        <div>
          <MemorizedBtn text={value} onClick={changeValue} />
          <MemorizedBtn text="Confirm" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

• React.memo()의 ( ) 안에 기억할 컴포넌트 넣어줌
• 클릭 이벤트가 발생했을 때 props가 변경된 Save Changes(Revert Change) 버튼은 다시 render 되지만 Confirm 버튼은 render 되지 않음
  => 성능 최적화에 유용

4.2 Prop Types

✍ React에서 컴포넌트의 각 props의 type을 정해놓고 싶을 때

    Btn.propTypes = {
      text: PropTypes.string,
      fontSize: PropTypes.number,
    };

• Component.propTypes = { key: PropTypes.type };
• 필수로 존재해야하는 props의 경우 { key: PropTypes.type.isRequired }로 설정할 수 있음

📌 다른 타입의 value가 props에 부여되었을 때 Console에서 경고를 확인할 수 있음