React Developer Tools를 통한 웹 최적화 진행 해보기

Reasct Developer Tools란?

Reasct Developer Tools란 React로 만들어진 웹앱의 성능측정을 도와주는 도구입니다.

컴포넌트의 렌더링 속도, 컴포넌트 리렌더링시 하이라이트 강조기능 등의 기능이 있습니다.

 

불필요한 리렌더링 발생

 

채팅을 칠 때마다 채팅방 리스트, 채팅방 헤더 부분이 Hilight 되며 강조되고 있습니다. 이는 해당 컴포넌트들이 리랜더링이 되고 있다는 뜻이므로 불필요한 리랜더링이 발생한다고 파악할 수 있겠습니다.

 

리랜더링의 원인

export default function ChatRoom({
  title,
}: {
  title: string;
}) {
const [currentChatList, setCurrentChatList] = useState<ChatType[]>([]);
const [chatText, onChangeValue, resetValue] = useInput('');

  return (
    <div className="flex flex-col w-full h-screen bg-[#F5FFF6] border-r-[1px]">
      <ChatRoomHeader title={title} />
      <ChatRoomBox currentChatList={currentChatList} />
      <ChatInput
        onChangeValue={onChangeValue}
        sendChat={sendChat}
        handleOnKeyPress={handleOnKeyPress}
        chatText={chatText}
      />
    </div>
  );
}

채팅방 전체를 관리하는 부모컴포넌트 역할을 하는 ChatRoom 컴포넌트입니다. 불필요한 리렌더링의 원인은 다음과 같습니다.

useInput의 onChangeValue를 통하여 chatText의 상태가 변화됩니다. 부모컴포넌트가 리렌더링 된다면 자식컴포넌트 모두 리렌더링이 되기 때문에 불필요한 리렌더링이 발생하게 된 것이었습니다.

 

React.memo를 사용하여 해결

React.memo란 React에서 제공하는 고차 컴포넌트 함수중 하나입니다. React.memo로 컴포넌트를 감싸게 된다면 감싸진 컴포넌트는 메모화된 컴포넌트가 됩니다. 즉 props가 변경되지 않는 한 부모 컴포넌트가 리랜더링이 되어도 같이 리랜더링 하지 않게 됩니다.

// ChatRoomBox.tsx
import React from 'react';

const ChatRoomBox = function ChatRoomBox() {
  return (
   // 채팅방 채팅리스트...
  );
};
export default React.memo(ChatRoomBox);

// ChatRoomHeader.tsx
import React from 'react';

const ChatRoomHeader = function ChatRoomHeader() {
  return (
   // 채팅방 헤더...
  );
};
export default React.memo(ChatRoomHeader);

 

 

예외사항

React.memo를 쓴다고 해서 무조건적으로 리렌더링을 막는 것은 아닙니다.

React는 이전 prop과 새 prop을 얕은 비교를 통하여 비교를 진행하게 됩니다. 즉, 각각 새로운 prop이 이전 prop과 참조가 동일한지 여부를 고려합니다. React는 부모 컴포넌트가 리렌더링 될 때마다 새 객체나 배열, 함수를 생성하게 됩니다. 즉, 동일한 참조가 아니기에 React.memo가 작동되지 않고 자식 컴포넌트가 리렌더링이 될 수 있습니다.

이럴 경우 함수엔 useCallback, 특정 값엔 useMemo 등을 활용하여 prop을 단순화하거나 메모화 해주어야 합니다.