5관문. Effect Event (Experimental)

관문 5 / 7

매 방문마다 analytics를 보내되, roomId가 바뀔 때만 재실행되고 url 변경엔 반응하지 않도록 하라.

📖 이론 비급

Effect Event: 반응형과 비반응형의 경계

Effect 안의 모든 값은 반응형이어야 한다. 하지만 "항상 최신 url을 읽고 싶지만, url 변경이 Effect 재실행 트리거가 되어선 안 된다"는 요구가 있다.

useEffectEvent (실험적): 비반응형 로직을 Effect 밖으로 추출한다. 이벤트 내부에서는 최신 props/state를 읽을 수 있지만, 의존성 배열에 포함되지 않아 Effect를 재실행시키지 않는다.

⚔️ 수련 코드

import { useState, useEffect, experimental_useEffectEvent as useEffectEvent } from 'react';

export default function ChatRoom({ roomId, url }) {
  // TODO: useEffectEvent로 onVisit을 추출하라
  // onVisit 안에서 url을 읽되, Effect 의존성에는 url을 넣지 않는다

  useEffect(() => {
    // roomId에 연결하고, 방문 시 url을 analytics에 기록
    const connection = { roomId };
    console.log('연결:', roomId, '| 현재 URL:', url);
    return () => console.log('연결 해제:', roomId);
  }, [roomId, url]); // url을 의존성에서 제거해야 한다

  return <p>방: {roomId}</p>;
}

Open Sandbox