11강. useEffect와 컴포넌트 생명주기

?1. 이번 강의에서 해결할 문제

검색 조건이 바뀔 때 문서 제목도 갱신하고, 컴포넌트가 사라질 때 등록한 동작을 정리해야 합니다. 렌더링만으로 처리할 계산과 외부 동기화를 구분합니다.

✓2. 학습 목표

• Effect가 필요한 경우를 판단한다.
• 의존성 배열에 반응값을 정확히 적는다.
• cleanup으로 이전 동기화를 정리한다.

◇3. 핵심 개념

useEffect는 React 밖의 시스템과 컴포넌트를 동기화하는 탈출구입니다. 네트워크, 타이머, 브라우저 API, 외부 위젯 연결에 사용합니다. props나 state로 계산 가능한 값은 Effect가 아니라 렌더링 중 계산합니다.

Effect는 커밋 뒤 실행되고 의존성이 바뀌면 이전 cleanup 후 다시 실행됩니다. 컴포넌트가 제거될 때도 cleanup이 실행됩니다. 개발 모드 StrictMode는 잘못된 정리를 찾기 위해 setup과 cleanup을 한 번 더 시험할 수 있습니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/components/SearchStatus.tsx

import { useEffect } from 'react';

type SearchStatusProps = {
  query: string;
};

export function SearchStatus({ query }: SearchStatusProps) {
  useEffect(() => {
    const previousTitle = document.title;
    document.title = query ? query + ' 검색 | Release Radar' : 'Release Radar';

    return () => {
      document.title = previousTitle;
    };
  }, [query]);

  return <p>현재 검색어: {query || '없음'}</p>;
}

파생 목록은 Effect로 만들지 않습니다.

const visibleGames = games.filter((game) => game.title.includes(query));

→5. 코드가 동작하는 이유

document.title은 React가 직접 렌더링하는 JSX 바깥의 브라우저 상태라 Effect가 적합합니다. query가 바뀔 때마다 새 제목으로 동기화되고 cleanup이 이전 제목을 복구합니다. visibleGames는 입력만으로 계산 가능하므로 렌더링 중 계산하는 편이 단순합니다.

!6. 자주 하는 실수와 해결법

• 모든 계산을 Effect와 state로 처리: 파생값은 렌더링에서 계산합니다.
• 의존성 누락: Effect 안에서 읽는 반응값을 배열에 포함하고 린트 경고를 억지로 숨기지 않습니다.
• 타이머·구독 정리 누락: cleanup에서 해제합니다.
• StrictMode에서 두 번 실행을 버그로 단정: 먼저 setup과 cleanup이 대칭인지 확인합니다.

✎7. 직접 실습

창 크기 변경 이벤트를 등록해 너비를 표시하는 컴포넌트를 만드세요. Effect에서 listener를 등록하고 cleanup에서 같은 함수를 제거하세요.

?8. 이해 점검 질문 3개

1. useEffect는 어떤 종류의 동기화에 사용하나요?
2. 의존성이 바뀌면 setup 전에 무엇이 실행되나요?
3. visibleGames 계산에 Effect가 필요하지 않은 이유는 무엇인가요?

■9. 핵심 요약

Effect는 외부 시스템과의 동기화에만 사용합니다. 의존성을 정확히 쓰고 setup과 cleanup을 대칭으로 만들면 생명주기 변화에도 안전합니다.