[React]React profiler를 통한 성능 비교 및 최적화

리액트는 컴포넌트 단위로 여러개 잘게 쪼개서 작업 할수록 좋다고 한다.
그래서 한 컴포넌트안에서 수행하는 코드와 잘게 나눠서 수행하는 코드를
비교해보자!

이때 react profiler를 통해 성능을 비교해볼 것이다.

A 컴포넌트는 일반적으로 한 파일에 모든 코드를 적을것이고,
B 컴포넌트에는 컴포넌트를 잘게 나눠서 작성해볼 것이다.

1] A.js

import React from 'react'

export default function A({message,posts}) {
  return (
    <div>
        <h1>A component</h1>
        <p>{message}</p>
        <ul>
          {posts.map(i=>{
            return(
                <li key={i.id}>{i.title}</li>
            )
          })}
        </ul>
    </div>
  )
}

2] B.js

import React from 'react';

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 key={post.id} post={post} />
      ))}
    </ul>
  );
};

export default function B({ message, posts }) {
  return (
    <div>
      <h1>B component</h1>
      <Message message={message} />
      <List posts={posts} />
    </div>
  );
}

이런식으로 B.js는 한 페이지 코드에 컴포넌트를 3개로 나누어서 props로 전달하고 있다.

실행시키면 서로 똑같은 동작을 하지만 렌더링 속도나 성능 면에서 차이가 있을 것이기에
react profiler를 통해 살펴보자!

구글 크롬 확장 프로그램에서 React Developer Tools를 설치하고
개발자 도구로 보면 profiler tab이 생긴 걸 볼수있다.

그래서 Hello라고 입력한 후에 profiler를 보면 같은 작업을 하는데도 A 컴포넌트보다 B 컴포넌트 렌더링 소요 시간이 더 긴 걸 알 수 있다.
리액트에선 컴포넌트를 여러개로 나눌수록 좋다했는데...?

그래서 이럴때 React Memo를 통해 성능을 최적화할 수 있다!

import React from 'react';

const Message = React.memo(({ message }) => {
  return <p>{message}</p>;
});

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

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

export default function B({ message, posts }) {
  return (
    <div>
      <h1>B component</h1>
      <Message message={message} />
      <List posts={posts} />
    </div>
  );
}

이렇게 React.memo로 감싸면

아까와는 달리 B 컴포넌트 렌더링 소요 시간이 현저히 줄어든 걸 볼 수 있다. 오히려 A보다 빨라짐!!

그럼 React.memo()가 뭔데?
다음 장에서 살펴보자..