[React] memo function

ReactJS에는 memo라는 유용한 기능이 있다.

 

만약 커스텀 버튼을 여러개를 생성 하고 클릭을 할경우, 특정 버튼의 이름이 변경되는 함수가 있다.

특정 버튼의 이름이 변경되는 작업을 할 때, 브라우저에서는 매번 새로운 렌더링을 통해 다시 컴포넌트를 그리는데 

이러한 작업은 경우에 따라 서비스를 매우 느리게할 수 있는 중요한 문제점으로 인식된다.

 

해당 문제점을 해결 하기 위해서 ReactJS에서는 변경이 필요하지않은 컴포넌트는 다시 그리지 않고 

변경된 컴포넌트만 다시 그리는 작업을 해주는 함수가 React.memo 라는 함수이다. 

 

 

<React.memo를 사용하지 않을 경우>

function Btn({ text, onChangeValue }) {
      console.log(text, "이 렌더링되었습니다.");
      return (
        <button
          onClick={onChangeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "15px 25px",
            borderRadius: 20,
            border: 0,
            margin: "15px",
          }}
        >
          {text}
        </button>
      );
}
    .......
    //생략
    .......
 function App() {
      const [value, setValue] = React.useState("Front Buttons");
      const changedValue = () => setValue("Back Button");

      return (
        <div>
          <Btn text={value} onChangeValue={changedValue} />
          <Btn text="ConfirmButton" />
        </div>
      );
}
ReactDOM.render(<App />, root);

 

<결과>

처음 두번의 렌더링은 초기 컴포넌트를 생성하는것으로 생략하고, 

세번째와 네번째 라인을 보면 클릭시 매번 렌더링이 호출되어, 새로 컴포넌트가 그리지는것을 볼 수 있습니다.

<React.memo를 사용한 경우>

    const MemoBtn = React.memo(Btn);
    function App() {
      const [value, setValue] = React.useState("Front Buttons");
      const changeValue = () => setValue("Back Button");

      return (
        <div>
          <MemoBtn text={value} changeValue={changeValue} />
          <MemoBtn text="ConfirmButton" />
        </div>
      );
    }
    ReactDOM.render(<App />, root);

 

<결과>

 

앞의 React.memo함수를 사용하지않을 경우와 비교했을 때, 변경된 부분만 새로 컴포넌트가 그려집니다.