React.memo통한 최적화

저번시간 성능측정을 해보니 A가 더 성능이 좋았던 것을 볼 수 있었다.

왜 B컴포넌트가 더 느릴까?

리액트에서 재렌더링의 대상은 state를 갖고 있는 컴포넌트들이다.

B컴포넌트를 보면 state를 props로 내려받아서 각각 컴포넌트들이 사용하고 있다.

import React from "react";

//B 자식 컴포넌트
const Message = ({ message }) => {
  return <p>{message}</p>;
};

const ListItem = ({ post }) => {
  return (
    <li key={[post.id]}>
      <p>{post.title}</p>
    </li>
  );
};

const List = ({ posts }) => {
  return (
    <ul>
      {posts.map((post) => (
        <ListItem post={post}></ListItem>
      ))}
    </ul>
  );
};

const B = ({ message, posts }) => {
  return (
    <div>
      <h1>B Component</h1>
      <Message message={message}></Message>
      <List posts={posts}></List>
    </div>
  );
};

export default B;

그런데… 생각해보면

input에 입력받아서 메시지가 재렌더링되는 부분은 B컴포넌트의 List, ListItem일 필요는 없다. message를 내려받는 컴포넌트만 재렌더링 되면 된다… 즉 재렌더링이 필요없는 부분도 지금 재렌더링 되고 있는 상황이다.

여기서 우리는 리액트에서 왜 컴포넌트를 쪼갤수록 좋은지 알 수 있다.

A컴포넌트를 보면

걍 통째로 되어있어서 message를 사용하는부분, 사용하지 않는 부분을 나눠서 최적화할 여지가 없다.

하지만 B컴포넌트는 message를 사용하는 부분, 사용하지 않는 부분으로 나눠서 최적화 할 수 있다!