[React] Hooks : optimizing 성능 최적화(1) - React.memo( )

React.memo( )란?

우선 memo( )는 훅이 아닙니다. 하지만 뒤에 공부할 useCallback이나 useMemo를 사용하기 위해서는 반드시 알아야 하는 개념입니다. React.memo( )는 Memorization(메모제이션) 기법으로 동작하며, 고차 컴포넌트(Higher Order Component, HOC)입니다. 컴포넌트가 props로 동일한 결과를 렌더링 하면, React.memo를 호출하고 결과를 Memoizaing(메모이징)하도록 래핑 하여 경우에 따라 성능 향상을 할 수 있습니다.

💥쉽게말해 화면에서 변경되는 부분이 없음에도 불구하고 아래의 이유로 화면이 다시 렌더링 될 때, 그 불필요한 렌더링을 줄이는 것으로 리액트 프로젝트의 부하를 줄이고 퍼포먼스를 향상시킬 수 있다는 뜻입니다.

1. 부모 컴포넌트가 렌더링 된 경우
2. 컴포넌트의 state가 변경된 경우
3. 부모로부터 전달받은 props값이 변경된 경우

컴포넌트의 리렌더링 확인하는 법

  우선 App.js와 Button.js 두 개를 만들어 줍니다. 그리고 App.js에 있는 input상자에 값을 넣어봅니다.

//App.jsx

import React, { useState } from "react";
import Button from "./components/Button";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={onChangeHandler} />
      <Button />
    </div>
  );
};

export default App;

 

// components/Button.js

import React from "react";

const Button = () => {
  console.log("리렌더링되고 있어요.");
  return <button>버튼</button>;
};

export default Button;

 

  위와 같이 input에 값을 넣으면 Button.js에 있는 "리렌더링되고 있어요." 라는 텍스트가 콘솔에 찍히는 것을 볼 수 있습니다. 이 텍스트가 콘솔에 찍히는 것이 Button.js 컴포넌트가 리렌더링을 하고있다는 것을 의미합니다.

 

불필요한 리렌더링을 막는 방법

  App.js가 리렌더링 되는 이유는 value라는 state가 onChange 될 때마다 setState 되고 있기 때문에 리렌더링이 되는 것 입니다. 하지만 이것은 불필요한 리렌더링이 아닙니다. 왜냐하면 input에 값을 입력할 때마다 입력한 값이 화면에 보여야 하는 게 당연하기 때문입니다.

 

  여기서 불필요한 리렌더링은 Button.js에서 발생하고 있습니다. input value의 변화와는 아무 관련이 없는 Button이 계속 렌더링 되고 있습니다.

 

  이럴 때 memo( )를 사용합니다. export default memo( Button )으로 Button.js를 감싸주면 Button.js는 리렌더링 하지 않습니다.

 

import React, { memo } from "react";

const Button = () => {
  console.log("리렌더링되고 있어요.");
  return <button>버튼</button>;
};

export default memo(Button);

이제 Button.js는 리렌더링 하지 않습니다. 최초에 콘솔이 찍힌 이후 input에 아무리 값을 넣어도 console창에 "리렌더링되고 있어요."가 찍히지 않습니다.

 

마무리

  React에서 상태 관리와 성능 최적화가 중요하다고 들었는데 이렇게 공부할 수 있게 돼서 좋았습니다. 앞으로 useCallback과 useMemo도 공부하여 확실하게 이해하고 넘어가겠습니다.