Frontend Academy · 강의

useEffect 기초: 의존성 및 정리

렌더링 후 사이드 이펙트를 실행하고, 의존성 배열로 재실행 시점을 제어하며, 메모리 누수를 방지하도록 정리 함수를 반환합니다.

useEffect 기초: 의존성 및 정리은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

useEffect란 무엇인가요

useEffect는 React가 렌더링한 후 부수 효과를 실행합니다. 부수 효과에는 데이터 가져오기, 이벤트 구독, 타이머 설정, 외부 API와의 상호작용이 포함됩니다. 효과는 렌더링 중이 아니라 페인트 후에 실행됩니다.

기본 문법

useEffect(effect, deps?). 효과 함수는 기본적으로 모든 렌더링 후에 실행됩니다. 실행 시점을 제어하려면 의존성 배열을 제공하세요.

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    console.log('Ran after every render');
  });
}

의존성 배열이 효과 실행 시점을 제어합니다

빈 배열 []: 마운트된 후 한 번 실행합니다. 비어 있지 않은 배열 [a, b]: a 또는 b가 변경될 때 실행합니다. 배열 없음: 모든 렌더링 후에 실행합니다(원하는 경우는 드뭅니다).

// Run once on mount:
useEffect(() => {
  fetchInitialData();
}, []);

// Run when userId changes:
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// Run after every render (usually a bug):
useEffect(() => {
  trackPageView();
});

정리 함수

useEffect에서 함수를 반환하면 정리를 실행할 수 있습니다. 이벤트 리스너를 제거하고, 구독을 취소하고, 타이머를 초기화하는 데 사용합니다. 정리 함수는 다음 효과가 실행되기 전에, 그리고 마운트 해제 시 실행됩니다.

useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // Cleanup: remove listener when effect re-runs or component unmounts
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

의존성의 오래된 클로저

효과는 생성된 시점에 참조하는 값을 클로저에 저장합니다. 의존성에 추가하지 않은 상태 또는 속성 값을 효과 내부에서 읽으면 오래된 값을 보게 됩니다. ESLint의 exhaustive-deps 규칙이 이를 찾아냅니다.

ESLint exhaustive-deps 규칙

react-hooks/exhaustive-deps ESLint 규칙은 효과의 의존성이 누락되면 경고합니다. 오래된 의존성은 버그를 일으키므로 이 규칙의 제안을 따르는 것이 거의 항상 올바릅니다.

useEffect와 useLayoutEffect 비교

useEffect는 브라우저가 페인트한 후 실행됩니다. useLayoutEffect는 DOM 변경 직후, 페인트 전에 동기적으로 실행됩니다. 화면이 깜빡이는 현상을 방지하려면 DOM 측정값을 읽을 때 useLayoutEffect를 사용하세요.

여러 효과

서로 관련 없는 작업을 분리하려면 useEffect를 여러 번 호출하세요. 각 효과는 자체 의존성 배열과 정리 로직을 가질 수 있습니다.

// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
  const sub = wsClient.subscribe(onMessage);
  return () => sub.unsubscribe();
}, []);

경쟁 상태 — ignore 플래그

효과가 속성을 기반으로 데이터를 가져올 때는 이전 요청이 나중 요청보다 늦게 완료될 수 있습니다. 오래된 응답을 무시하도록 정리 플래그를 사용하세요.

useEffect(() => {
  let ignore = false;

  async function load() {
    const data = await fetchUser(userId);
    if (!ignore) setUser(data); // only update if not cleaned up
  }

  load();
  return () => { ignore = true; };
}, [userId]);

Strict Mode의 효과 중복 실행

React 18 Strict Mode는 정리 관련 버그를 드러내기 위해 개발 환경에서 구성 요소를 마운트하고, 마운트 해제한 다음 다시 마운트합니다. 효과가 두 번 실행되지만 이는 의도된 동작이며, 누락된 정리를 찾는 데 도움이 됩니다.

useEffect를 사용하지 말아야 할 때

다음과 같은 경우에는 useEffect를 사용하지 마세요. 1) 속성에서 상태를 도출하는 경우(렌더링 중에 계산하세요), 2) 속성 변경 시 상태를 초기화하는 경우(key 속성을 사용하세요), 3) 조건 없이 상태를 업데이트하는 경우(반복 실행이 발생합니다). 확실하지 않다면 이 코드가 사용자 이벤트에 반응하는지, 아니면 외부 시스템에 반응하는지 물어보세요.

빠른 확인

useEffect의 정리 함수는 언제 실행되나요?

복습: useEffect

부수 효과는 렌더링 후에 실행됩니다. 빈 의존성 배열 = 마운트 시 한 번. 의존성 배열 = 특정 변경 시. 누수를 방지하려면 정리 함수를 반환하세요. 서로 다른 작업에는 여러 효과를 사용하세요. ignore 플래그는 오래된 데이터 요청 응답을 방지합니다. Strict Mode는 정리를 테스트하기 위해 효과를 두 번 실행합니다. 렌더링 중 계산할 수 있는 파생 값이나 상태에는 useEffect를 사용하지 마세요.

자주 묻는 질문

“useEffect 기초: 의존성 및 정리” 강의는 무료인가요?

네 — “useEffect 기초: 의존성 및 정리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“useEffect 기초: 의존성 및 정리”에서 뭘 배우나요?

렌더링 후 사이드 이펙트를 실행하고, 의존성 배열로 재실행 시점을 제어하며, 메모리 누수를 방지하도록 정리 함수를 반환합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“useEffect 기초: 의존성 및 정리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기