Effect Event

Effect의 연결 생명주기와 최신 값을 읽는 이벤트성 로직을 분리합니다.

···
html
<div class="scene"><div class="connection"><span class="lamp"></span> ROOM CONNECTED <b id="connections">1 connection</b></div><div class="theme">theme <span id="theme">mint</span></div><div class="toast" id="toast">Connected with mint theme</div><div class="label">theme changes; connection count stays 1</div></div>
css
.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.connection{display:flex;align-items:center;gap:6px;border:1px solid var(--accent);border-radius:8px;padding:.55em;font:600 clamp(12px,3vmin,15px) ui-monospace,monospace}.connection b{margin-left:auto}.lamp{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}.theme{margin:clamp(16px,7vmin,45px) auto;text-align:center}.theme span{border:1px solid var(--line);padding:.5em;border-radius:6px}.toast{background:var(--accent);color:var(--bg);padding:.5em;border-radius:7px;text-align:center;transition:background .3s}.label{text-align:center;margin-top:10px;font-size:.85em}
js
const colors=["mint","amber","blue"];let n=0;function tick(){const i=n%3;document.getElementById("theme").textContent=colors[i];document.getElementById("toast").textContent="Connected with "+colors[i]+" theme";document.getElementById("toast").style.background=["var(--accent)","var(--accent-3)","var(--accent-2)"][i];n++}tick();setInterval(tick,950)

useEffectEvent는 Effect에서 호출하는 이벤트성 함수를 만듭니다. 이 함수는 최신 prop과 상태를 읽지만 Effect의 의존성에는 넣지 않습니다.

데모는 채팅 연결을 유지한 채 테마만 바꿔 새 알림에 최신 색을 쓰는 흐름입니다. Effect Event는 린트 오류를 피하려고 모든 함수를 감싸는 도구가 아니며, 해당 Effect와 같은 컴포넌트나 훅에 선언해야 합니다.

언제 쓰나

연결은 유지해야 하지만 연결 이벤트에서 최신 테마·설정 값을 읽어야 할 때 사용합니다.

페이지로 열기 ↗