[React] 6. Memo

function Btn({text, changeValue}) {
	console.log(text, "was rendered");
    return (
      <button
        onClick = {changeValue}
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {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>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

첫번째 버튼을 누르면 Save Changes에서 Revert Changes로 글자가 변경됩니다. 이때 위 코드에 의하면 버튼 두 개가 모두 새롭게 렌더링됩니다. 그런데 여기서 두번째 버튼은 변화가 없기 때문에 리렌더링되는 것이 비효율적입니다. 이러한 점을 개선하기 위해 Memo를 사용해줄 수 있습니다.

 

Memo

React에게 어떤 컴포넌트가 다시 그려지는 것을 원치 않는다고 말해주는 기능입니다. 이 기능을 사용하면 prop에 변화가 있을 경우만 리렌더링해주고, 변화가 없을 경우에는 리렌더링을 하지 않습니다.

function Btn({text, changeValue}) {
    console.log(text, "was rendered");
    return (
      <button
        onClick = {changeValue}
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {text}
      </button>
    );
  }
  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>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

 

 

출처 : https://nomadcoders.co/react-for-beginners/lectures/3276