6관문. Idempotency (멱등성)

관문 6 / 7

Strict Mode의 이중 실행에서도 부작용이 없는 멱등성 있는 Effect를 작성하라.

📖 이론 비급

멱등성: 여러 번 실행해도 같은 결과

리액트 Strict Mode는 개발 환경에서 Effect를 mount → unmount → mount 순으로 두 번 실행한다. 이 테스트를 통과하는 Effect는 프로덕션에서도 안전하다.

점검 방법: cleanup에서 Effect의 모든 부작용을 되돌릴 수 있는가? addEventListener → cleanup에서 removeEventListener 외부 구독 → cleanup에서 구독 해제 DOM 노드 추가 → cleanup에서 제거

⚔️ 수련 코드

import { useEffect } from 'react';

export default function IdempotencyDemo() {
  useEffect(() => {
    // 문제: Strict Mode에서 두 번 실행되면 이벤트 리스너가 두 번 등록된다
    window.addEventListener('keydown', handleKeyDown);
    document.title = '수련 중';
    // TODO: cleanup 함수를 반환하여 멱등성을 보장하라
  }, []);

  function handleKeyDown(e) {
    console.log('키 입력:', e.key);
  }

  return <p>아무 키나 눌러보세요</p>;
}

Open Sandbox