TIL 96. 2024-05-17

Task TODOLIST

• 캠 클릭 시 해당 playerId 값 서버에 전달
• 새로운 LiveKit 컴포넌트 활용
• 기존 비효율적으로 활용하던 zustand 효율적으로 활용

✨ 개발 내용

기존) javascript 문법으로 활용했던 부분

    {localTracks.map((track, index) => (
        <div
          key={`${track.participant.sid}-${index}`}
          className={`${S.participantOverlay} ${activeParticipantSid === track.participant.sid ? S.active : ""}`}
          onClick={isLocalOverlay ? (e) => checkClickHandle(e, track.participant, index) : undefined}
        >
          <ParticipantTile
            trackRef={track}
            disableSpeakingIndicator={true}
            className={isLocalOverlay ? S.localCam : undefined}
          />

          <div className={`${S.imageOverlay} ${isReady ? S.active : ""}`}>
            <Image src={CamCheck} alt={track.participant.sid} />
          </div>
        </div>
      ))}

현재) LiveKit 컴포넌트 사용

   <TrackLoop tracks={localTracks}>
        <div
          className={`${S.participantOverlay} ${activePlayerId === localParticipant.identity ? S.active : ""}`}
          onClick={isLocalOverlay ? (e) => checkClickHandle(e, localParticipant.identity) : undefined}
        >
          <ParticipantTile disableSpeakingIndicator={true} className={isLocalOverlay ? S.localCam : undefined} />

          <div className={`${S.imageOverlay} ${isReady ? S.active : ""}`}>
            <Image src={CamCheck} alt={localParticipant.identity} />
          </div>
        </div>
      </TrackLoop>

TrackLoop 내부 모습

export function TrackLoop({ tracks, ...props }: TrackLoopProps) {
  return (
    <>
      {tracks.map((trackReference) => {
        return (
          <TrackRefContext.Provider
            value={trackReference}
            key={getTrackReferenceId(trackReference)}
          >
            {cloneSingleChild(props.children)}
          </TrackRefContext.Provider>
        );
      })}
    </>
  );
}

별도 key값을 주지 않아도 위의 TrackLoop 내부에서 부여하고 있는 걸 알 수 있다.

각 value값을 접근하는 방법

<TrackRefContext.Consumer>
          {(track) => ())}


export function ParticipantTile({
  trackRef,
  children,
  onParticipantClick,
  disableSpeakingIndicator,
  ...htmlProps
}: ParticipantTileProps) 

이 두가지를 활용하면 된다.

📚 레퍼런스 (또는 새로 알게 된 내용) 혹은 궁금한 사항들

https://docs.livekit.io/reference/components/react/concepts/loops/