Memo를 통해 Rerender 최소화

 

1. props에 넣을 수 있는 것들

- true, false, string, function 등

 

2. btn을 렌더링하는 컴포넌트가 어떻게 되는지 알아보기

- 버튼에 onClick을 넣고 이 함수는 App 컴포넌트에 있는 state를 바꾸도록 해 보기

    function App() {
      const [value, setValue] = React.useState("Save changes");
      const changeValue = () => setValue("Revert changes");
      return (
        <div>
          <Btn text={value} onClick={changeValue} />
          <Btn text="Continue" />
        </div>
      );
    }

- onClick={chagneValue} 는 이벤트 리스너가 아닌 컴포넌트에(Btn)으로 들어가는 prop이다.
  이벤트리스너는 HTML 요소에다가 넣는 것 
 컴포넌트에 onClick을 넣는경우 아래와같이 손수 전달 해 줘야함

    function Btn({ text, changeValue }) {
      return (
        <button
          onClick={changeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: 16,
          }}
        >
          {text}
        </button>
      );
    }

    function App() {
      const [value, setValue] = React.useState("Save changes");
      const changeValue = () => setValue("Revert changes");
      return (
        <div>
          <Btn text={value} changeValue={changeValue} />
          <Btn text="Continue" />
        </div>
      );
    }

클릭 전/후

 

- 부모의 상태를 바꾸는 함수로인해 부모 컴포넌트에서 그 함수는 prop으로 보내면 자식 컴포넌트에서 그 함수가 실행 된다.

 

3. 어플리케이션을 최적화 시키기 (Memo)

- 컴포넌트가 다시 그려지지 않기를 원한다고 Memo를 할 수 있다.
   (불빌요한 Rerender 제거하고 변경이 일어난 부분만 렌더링 시킬 수 있다.) 

    const MemorizedBtn = React.memo(Btn);

    function App() {
      const [value, setValue] = React.useState("Save changes");
      const changeValue = () => setValue("Revert changes");
      return (
        <div>
          <MemorizedBtn text={value} changeValue={changeValue} />
          <MemorizedBtn text="Continue" />
        </div>
      );
    }