<aside> ♻️ 시리즈

1. 네?? Component를 memoization해도 리렌더링이 발생한다구요..?? 💦 (feat. context)
2. Provider에 전달할 value를 memo하기
3. React.memo의 2번째 인자를 아시나요? </aside>

개요

현재 Workspace 코드는 다음과 같아요.

return (
    <SocketContext.Provider value={{ momSocket, workspaceSocket }}>
      <MeetingContext.Provider value={{ isOnGoing, setIsOnGoing }}>
        {workspace && (
          <SelectedMomContext.Provider value={{ selectedMom, setSelectedMom }}>
            <Sidebar workspace={workspace} />
            <Mom />
          </SelectedMomContext.Provider>
        )}
        {isOnGoing && <MeetingMediaBar />}
      </MeetingContext.Provider>
    </SocketContext.Provider>
  );

이전 글에서 리렌더링될 필요가 없는 MomLIst를 memoization 해줬어요.

문제 상황

그런데 useSocket이 이 PR 이후로 제대로 작동하게 되었어요.

Refactor/#287-S : 소켓 상태 관리 리팩토링 - 다른 워크스페이스 접속 시 이전 연결 끊기 리팩토링 by juyeong-s · Pull Request #288 · boostcampwm-2022/web27-Wabinar

Context.Provider에 value를 전달할 때 value에 바로 객체를 전달해요.

<SocketContext.Provider value={**{ momSocket, workspaceSocket }**}>

그래서 Sidebar가 새로 렌더링 될 때

같은 값이더라도 새로운 객체가 생성되어 다른 주소를 가리키기 때문에 props가 달라졌다고 판단하고 리렌더링 시켜버려요.

해결 방법

그래서 Context.Provider에 전달하는 value들을 useMemo를 사용해 memoization해주었어요.

1. socket value만 memo했을 때

return (
  <SocketContext.Provider value={memoizedSocketValue}>
    <MeetingContext.Provider value={{ isOnGoing, setIsOnGoing }}>
      {workspace && (
				...

https://user-images.githubusercontent.com/65100540/207248824-c42e715c-2641-4b6e-bcbd-98034fa48117.mov