TIL 88. 2024-05-06

이쀀ꡬ·2024λ…„ 6μ›” 2일
0

TIL μˆœμ„œ

λͺ©λ‘ 보기
88/119

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/

profile
개발 쀑~~~ λ‚΄ μžμ‹ λ„ λ°œμ „ μ€‘πŸ˜‚πŸ€£

0개의 λŒ“κΈ€

κ΄€λ ¨ μ±„μš© 정보