[React] 성능 측정하기

React 성능을 측정할 수 있는 Profiler라는 도구가 있다. 

 

사용하기 위해선 크롬에서는 React Developer Tools라는 익스텐션을 설치해야 한다. 

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko 

React Developer Tools

 

설치하고 React 프로젝트를 실행해서 개발자 도구를 들어가면 

다음과 같이 Profiler가 있다. 

 

Profiler를 사용해서 컴포넌트의 렌더링에 걸리는 시간을 확인할 수 있다. 

 

렌더링하면 가장 먼저 떠오르는 React.memo를 사용하는 경우와 사용하지 않는 경우의 차이를 

비교해보았다. 

 

import { useEffect, useState } from "react";
import styled from "styled-components";
import ChildComponentOne from "./ChildComponentOne";
import ChildComponentTwo from "./ChildComponentTwo";

const ParentsComponents = () => {
  const [text, setText] = useState("");
  const [photos, setPhotos] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/photos")
      .then((response) => response.json())
      .then(setPhotos);
  }, [setPhotos]);

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.currentTarget.value)} />

      <Wrapper style={{ display: "flex", justifyContent: "space-between" }}>
        <ChildComponentOne photos={photos} />
        <ChildComponentTwo photos={photos} />
      </Wrapper>
    </div>
  );
};

const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  width: 100%;
`;

export default ParentsComponents;

먼저 최상위 부모 컴포넌트로 렌더링에 유의미한 시간을 확인하기 위해서 

fetch로 많은 데이터를 받아와서 각 컴포넌트에 넘겨준다. 

 

리렌더링을 발생시키기 위해서 input에서 State를 변경할 수 있게 만들었다. 

 

// ChildComponentOne 
import React from "react";
import styled from "styled-components";

const ChildComponentOne = ({ photos }) => {
  console.log("ChildComponentOne Render");

  return (
    <ChildWrapper>
      {photos.map((photo) => (
        <p key={photo.id}>테스트</p>
      ))}
    </ChildWrapper>
  );
};

const ChildWrapper = styled.div`
  width: 45%;

  padding: 10px;
`;

export default React.memo(ChildComponentOne);

React.memo를 사용한 컴포넌트 비교군이다. 

photos는 처음 fetch를 통해서만 변경되므로 계획대로라면 React.memo를 사용해서

리렌더링이 발생하면 안된다.

 

// ChildComponentTwo 
import styled from "styled-components";

const ChildComponentTwo = ({ photos }) => {
  console.log("ChildComponentTwo Render");

  return (
    <ChildWrapper>
      {photos.map((photo) => (
        <p key={photo.id}>테스트</p>
      ))}
    </ChildWrapper>
  );
};

const ChildWrapper = styled.div`
  width: 45%;

  padding: 10px;
`;

export default ChildComponentTwo;

React.memo를 사용하지 않은 컴포넌트이다. 

그러므로 부모 컴포넌트가 리렌더링되면 예상대로라면 자식 컴포넌트로 리렌더링이 발생해야 한다. 

 

React.memo를 사용한 컴포넌트와 사용하지 않은 컴포넌트가 확실하게 비교가 가능하다. 

memo를 사용한 컴포넌트를 리렌더링이 발생하지 않고 사용한 컴포넌트를

리렌더링이 발생하는 것을 볼 수 있다.