• User, WorkspaceList, Workspace, SelectedMom 등은 결국 서버 상태라서 react-query(1.28 MB) 사용해도 좋아보여요.

  • 클라이언트 쪽에 socket / isOngoing 상태가 필요하긴 한데, 이건 Context로 뒀을 때 단점이 있는 상태가 아니라고 판단했어요. (변경되면 하위 컴포넌트가 다시 그려져야해서)
  • 서버 / 클라이언트 상태를 분리해서 한눈에 보는건 이쪽이 편할 것 같아요. 오랜만에 보니까 상태 흐름 읽는게 좀 어려웠어요.
    • 도훈님 의견도 react-query가 코드 읽기에 더 편하고, 데이터 없는 경우 / 에러 처리도 편해서 이걸로 결정

• 처음에 생각했던 Recoil / Jotai를 사용한다면 번들 사이즈도 작고(2.21 MB > 389 kB) 유지보수도 활발하게 이루어지고 있는 Jotai를 쓰는게 좋을 것 같아요.

  <aside> ⛳ 멀리 떨어져있는 컴포넌트 간에 공유하는 상태를 보다 atomic하게 관리하고 memo 사용하지 않고도 불필요한 렌더링이 발생하지 않도록 하기 위함

  </aside>

  • 이건 쓰면서 공부해볼 수 있고, 사용법이 간단해서 빠르게 리팩토링 가능하다는 점이 장점이에요.

현재 사용중인 Context

내부에 소켓 이벤트들이 있어서 그렇지 상태만 뽑아놓으니 생각보다 간단해요.

<**UserContext**.Provider value={{ user, setUser }}>
  <Routes>
    <Route path="/" element={<LoginPage />} />
    <Route path="/oauth" element={<OAuthPage />} />
    <Route path="/workspace/*" element={<WorkspacePage />} />
    <Route path="/404" element={<NotFoundPage />} />
  </Routes>
</UserContext.Provider>

<Suspense fallback={<WorkspaceSkeleton />}>
  <**WorkspacesContext**.Provider value={{ workspaces, setWorkspaces }}>
    {isLoaded ? (
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<DefaultWorkspace />} />
          <Route path="/:id/*" element={<Workspace />} />
        </Route>
      </Routes>
    ) : (
      <WorkspaceSkeleton />
    )}
  </WorkspacesContext.Provider>
</Suspense>

<**SocketContext**.Provider value={memoizedSocketValue}>
  <**MeetingContext**.Provider value={memoizedOnGoingValue}>
    {**workspace** && ( // 현재 Recoil atom, 기존 코드에서는 Context 사용
      <**SelectedMomContext**.Provider value={{ selectedMom, setSelectedMom }}>
        <Sidebar />
        {workspace.moms.length ? <Mom /> : <DefaultMom />}
      </SelectedMomContext.Provider>
    )}
    {isOnGoing && <MeetingMediaBar />}
  </MeetingContext.Provider>
</SocketContext.Provider>

• User

  export type User = {
    id: number;
    name: string;
    avatarUrl: string;
  };
  

• Workspaces

  interface IWorkspceContext {
    workspaces: Workspace[];
    setWorkspaces: React.Dispatch<React.SetStateAction<Workspace[]>>;
  }
  
  export interface Workspace {
    id: number;
    name: string;
    code: string;
  }
  

• Workspace

  export type WorkspaceInfo = {
    name: string;
    members: User[];
    moms: Mom[];
  };
  

• Socket

  interface ISocketContext {
    momSocket: Socket;
    workspaceSocket: Socket;
  }
  

• Selected Mom

  interface IMomContext {
    selectedMom: TMom | null;
    setSelectedMom: React.Dispatch<React.SetStateAction<TMom | null>>;
  }
  
  export type TMom = {
    _id: string;
    title: string;
    createdAt: Date;
  };
  

• Meeting

  interface IMeetingContext {
    isOnGoing: boolean;
    setIsOnGoing: Dispatch<SetStateAction<boolean>>;
  }