[FE] refactor: DataChannel 전역 상태로 변경

[HBSPS]

PR 설명

• DataChannel 전역 상태로 변경

✅ 완료한 기능 명세

• codeDataChannel 전역 상태로 변경
• languageDataChannel 전역 상태로 변경

📸 스크린샷

import { create } from 'zustand';
import { DataChannel } from '@/types/RTCConnection';

interface DataChannels {
  codeDataChannel: DataChannel[];
  addCodeDataChannel: (socketId: string, dataChannel: RTCDataChannel) => void;
  removeCodeDataChannel: (value: { id: string }) => void;

  languageDataChannel: DataChannel[];
  addLanguageChannel: (socketId: string, dataChannel: RTCDataChannel) => void;
  removeLanguageChannel: (value: { id: string }) => void;
}

const useDataChannels = create<DataChannels>((set) => ({
  codeDataChannel: [],
  addCodeDataChannel: (id, dataChannel) => set((state) => ({ ...state, codeDataChannel: [...state.codeDataChannel, { id, dataChannel }] })),
  removeCodeDataChannel: (data) =>
    set((state) => ({ ...state, codeDataChannel: [...state.codeDataChannel.filter(({ id }) => id !== data.id)] })),

  languageDataChannel: [],
  addLanguageChannel: (id, dataChannel) =>
    set((state) => ({ ...state, languageDataChannel: [...state.languageDataChannel, { id, dataChannel }] })),
  removeLanguageChannel: (data) =>
    set((state) => ({ ...state, languageDataChannel: [...state.languageDataChannel.filter(({ id }) => id !== data.id)] })),
}));

export default useDataChannels;

고민과 해결과정

• 전역 상태로 변경한 이유
  • 매우 깊은 depth 까지 props drilling이 발생했으며 그 과정에서 중간 단계에 있는 컴포넌트에 불필요한 재렌더링이 되는 것을 해결하기 위해

[d0422]

고생하셨습니다!

[d0422]

useCRDT로 보일러플레이트코드를 줄일 수 있지 않을까 합니다!