🚀 렌더링 범인은 하나!

🔥 문제상황

평화롭게 개발을 하고 있는 어느날,,

마스터클래스에서 채팅을 입력하면 스트리밍 페이지에 불필요한 렌더링이 일어난다는 피드백을 받았습니다.

React Dev Tools의 Highlight updates when components render 옵션을 체크하고,

렌더링 여부를 확인해 봤습니다.

이렇게 범인 찾기가 시작이 되었습니다

🚀 해결 과정

1. Profiling 하기

가장 먼저 React Dev Tools Profiler를 열어서 정확히 어떤 컴포넌트들이 렌더링되고, 어떤 이유로 렌더링이 되는지 확인해 봤습니다.

스트리밍 컴포넌트의 AudioController가 렌더링 될 때마다 아이콘들과 채팅 컴포넌트가 재렌더링 된다는 것을 알게 되었습니다.

렌더링 되는 요소들의 부모 요소에서 각 요소들이 의존성이 있는 것인가 확인했습니다.

2. 코드 뜯어보기

export function StreamingPage() {
  const { isConnected, connect, reset, userCount } = useSocketStore();
  const { clearMessages } = useChatMessageStore();
  const { roomId } = useParams<{ roomId: string }>();

  useEffect(() => {
		// 소켓 연결
  }, [roomId]);

  return (
    <div className="flex flex-row h-screen">
      <div className="flex-grow min-w-[calc(100%-340px)]">
        <NetworkBoundary key={roomId}>
          <StreamingContainer />
        </NetworkBoundary>
      </div>
      <div className="h-screen bg-grayscale-900 flex-shrink-0 w-[340px] text-grayscale-100 px-8 pt-10 pb-10 flex flex-col">
        <div className="flex justify-between items-center mb-4">
          <div className="text-2xl font-bold">채팅</div>
          <div className="flex items-center gap-2">
            <Person />
            <span className="text-lg">{userCount}명</span>
          </div>
        </div>
        <ChattingContainer />
      </div>
    </div>
  );
}

거슬러 올라가다 보니 Page 레이아웃 까지 올라오게 되었습니다.

StreamingContainer 에서 오디오컨트롤러가 렌더링이 되면, Person 아이콘과 ChattingContainer 가 렌더링 되는 것이었습니다.

확실하게 알기 위해서 채팅과 관련된 div 를 컴포넌트로 분리하면서 React.memo 를 사용하여 메모제이션을 진행했습니다.

export const Chatting = React.memo(function ChatSection() {
  const userCount = useSocketStore((state) => state.userCount);

  return (
    <div className="h-screen bg-grayscale-900 flex-shrink-0 w-[340px] text-grayscale-100 px-8 pt-10 pb-10 flex flex-col">
      <div className="flex justify-between items-center mb-4">
        <div className="text-2xl font-bold">채팅</div>
        <div className="flex items-center gap-2">
          <Person />
          <span className="text-lg">{userCount}명</span>
        </div>
      </div>
      <ChattingContainer />
    </div>
  );
});

채팅 부분 자체를 메모제이션 했기 때문에 재렌더링이 일어나지 않을 것이라 생각했습니다.

하지만 렌더링은 계속 되었습니다.

다른 원인을 찾아야 했습니다.

export function StreamingPage() {
  const { connect, reset } = useSocketStore();
  const { clearMessages } = useChatMessageStore();
  const { roomId } = useParams<{ roomId: string }>();

  useEffect(() => {
		// 소켓 연결
  }, [roomId]);

  return (
    <div className="flex flex-row h-screen">
      <div className="flex-grow min-w-[calc(100%-340px)]">
        <NetworkBoundary key={roomId}>
          <StreamingContainer />
        </NetworkBoundary>
      </div>
			<Chatting />
    </div>
  );
}

채팅 컴포넌트만 얻은 채로 다시 스트리밍 페이지로 돌아왔습니다.

스트리밍 페이지의 상태 변수들을 확인해봤습니다.

굉장히 수상해보이는 전역으로 관리되고 있는 소켓 함수를 찾았습니다.

현재 소켓에 관한 내용은 zustand를 이용해 useSocketStore 로 전역으로 관리하고 있었습니다.

문득 zustand 로 관리하는 상태들은 렌더링이 다시 될 것이다 라는 생각으로 확인해보기로 했습니다.

3. zustand 렌더링 최적화

zustand에서 전체 스토어를 구독하게 되면, 스토어에 담고있는 모든 state가 변경될 때마다 구독중인 컴포넌트가 불필요하게 렌더링 된다

따라 특정 state만 구독해 선택적 참조를 통해 필요한 것만 가져오는 방식을 사용해야 한다는 것을 알게 되었습니다.

 // 불필요한 렌더링 발생
 const { clearMessages } = useChatMessageStore();
 
 // 필요한 state만 구독
 const clearMessages = useChatMessageStore((state) => state.clearMessages);

필요한 state만 구독을 하던 중에 2개를 요청해야 하는 경우에 문제가 발생했습니다.

해당 에러가 발생하는 원인은 여러가지가 있는데 함수에 대한 참조를 전달하는 대신 함수를 호출하는 경우, 컴포넌트 렌더링 과정에서 상태가 계속 업데이트 되는 경우, useEffect나 상태 업데이트 함수가 서로를 무한히 호출하는 경우 등이 있습니다.

변경한 useSocektStore 참조 함수에서 zustand selector 함수가 매 렌더링마다 새로운 객체를 생성하여 무한 업데이트 루프가 발생하여 해당 오류가 발생하는 것입니다.

각각 따로 selector를 사용하는 방법도 있겠지만, zustand의 shallow를 사용해보기로 했습니다.

const { connect, reset } = useSocketStore(
  useShallow((state) => ({ connect: state.connect, reset: state.reset })),
);

4. 결과

채팅 컴포넌트는 렌더링되지 않는 다는 것을 확인할 수 있었습니다!!

🤸‍♀️ 후기

• zustand의 shallow가 상태가 변경되었을 때만을 렌더링을 시킨다는 것을 알게 되었습니다.
• React Dev Tools의 Profiler 사용이 능숙해졌습니다.
• 설계를 더 꼼꼼히 했다면 원인 파악이 더 빨랐을 것 같아, 컴포넌트 설계의 중요성을 느끼게 되었습니다.