[React] 최적화 / 컴포넌트 재사용 / React.memo

비효율적인 컴포넌트 rendering

 

setCount(10);

setText("Hello");

App 컴포넌트 의 count state를 setCount로 변경하게 되면, App 컴포넌트가 랜더링 되고 자식 컴포넌트 들인 CountView 컴포넌트와 TextView 컴포넌트가 rendering된다.

count state가 바뀔 때 TextView 컴포넌트가 쓸데 없이 rendering 되는 낭비가 발생하고,
text state가 바뀔 때, CountView 컴포넌트가 rendering 되는 낭비가 발생한다.

비효율적인 rendering을 막기 위해 count state만 변경됬을 때는 CountView 컴포넌트만 , text state만 변경됬을 때는 TextView 컴포넌트만 rendering되어야 한다.

이러한 문제를 해결하기 위해서는 함수형 컴포넌트 에선 컴포넌트에게 업데이트 조건을 걸어 원하는 컴포넌트만 rendering이 되도록 하는 React.memo 을 사용 한다 !!

rendering 문제점

import React, { useState, useEffect } from "react";

const CountView = ({ count }) => {
  useEffect(() => {
    console.log(`CountView is update count: ${count}`);
  });
  return <div>{count}</div>;
};
const TextView = ({ text }) => {
  useEffect(() => {
    console.log(`TextView is update text: ${text}`);
  });
  return <div>{text}</div>;
};

const OptimizeText = () => {
  const [count, setCount] = useState(1);
  const [text, setText] = useState("");
  ///
  return (
    <div style={{ padding: 50 }}>
      <div>
        <h2>count</h2>
        <CountView count={count} />
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
      <div>
        <h2>text</h2>
        <TextView text={text} />
        <input
          value={text}
          onChange={(e) => {
            setText(e.target.value);
          }}
          text={text}
        />
      </div>
    </div>
  );
};

export default OptimizeText;

React.memo 최적화 적용 전

count + 버튼을 누를 때 마다, TextView 컴포넌트가 re-rendering 되는 낭비가 발생한다.

React.memo 를 활용하여 re-rendering 방지를 최적화 해준다. !!

 

rendering 최적화 / React.memo

import React, { useState, useEffect } from "react";

const CountView = React.memo(({ count }) => {
  useEffect(() => {
    console.log(`CountView is update count: ${count}`);
  });
  return <div>{count}</div>;
});
const TextView = React.memo(({ text }) => {
  useEffect(() => {
    console.log(`TextView is update text: ${text}`);
  });
  return <div>{text}</div>;
});

const OptimizeText = () => {
  const [count, setCount] = useState(1);
  const [text, setText] = useState("");
  ///
  return (
    <div style={{ padding: 50 }}>
      <div>
        <h2>count</h2>
        <CountView count={count} />
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
      <div>
        <h2>text</h2>
        <TextView text={text} />
        <input
          value={text}
          onChange={(e) => {
            setText(e.target.value);
          }}
          text={text}
        />
      </div>
    </div>
  );
};

export default OptimizeText;

React.memo 최적화 적용 후

컴포넌트를 React.memo 로 감싸 주게 되면 해당 컴포넌트는 prop이 변경될 때만 re-rendering 이 된다.

 

참고

https://espania.tistory.com/365

[React] 실습 / API 호출 / useEffect / Mount

https://espania.tistory.com/368

[React] 최적화 / 함수 재선언 방지 / useCallback / usememo

https://codesandbox.io/s/busy-williams-4thyzb?file=/src/OptimizeText.js:0-1023 

busy-williams-4thyzb - CodeSandbox