#4.1 Memo

 

<Btn txt={value} onClick={changeValue} />

이렇게 컴포넌트에 작성되어 있는 onClick 은 이벤트 리스너가 아니라 하나의 props 이다 

 

컴포넌트를 re-rendering하고 싶지 않을 때 사용하는 개념 "Memo"

const MemorizedBtn = React.memo(Btn);

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

  const MemorizedBtn = React.memo(Btn);


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

  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);