2026-01-21

useEffect

useEffect란?

컴포넌트 렌더링 이후에 부수 효과(side effect)를 처리하기 위한 React Hook

  • 렌더링 결과를 화면에 반영한 뒤 실행됨
  • 컴포넌트의 생명주기와 연결됨

Side Effect란?

렌더링 외에 발생하는 모든 작업

  • API 요청
  • 이벤트 등록/해제
  • 타이머(setTimeout, setInterval)
  • DOM 직접 조작
  • 로깅, 구독(subscribe)

왜 렌더링 안에서 side effect를 하면 안 되는가

렌더링은 순수해야 함

  • 같은 props/state → 항상 같은 UI
  • 렌더링 중 side effect 발생 시 예측 불가
// 안 좋은 예
functionComponent() {
fetch('/api');// 렌더링 중 side effect
return<div />;
}

// 올바른 예
useEffect(() => {
fetch('/api');
}, []);

⇒ 렌더는 UI 계산만, effect는 useEffect에서

기본 문법

useEffect(() => {
// 실행 코드

return() => {
// cleanup
  };
}, [deps]);

useEffect 안에서 사용하는 props ,state, 함수는 원칙적으로 deps에 넣어야 한다

useEffect 호출 시점

  1. deps 없음
useEffect(() => {
console.log("렌더 후 실행");
});
  • 의존성 배열을 넘기지 않을 경우에는 매 렌더링마다 호출 (모든 렌더링 후마다 실행)

  • state/props 변경 시 계속 실행

    ⇒ 거의 안 씀 (성능 이슈)

  1. deps 빈 배열 []
useEffect(() => {
console.log("마운트 시 1회");
}, []);
  • 컴포넌트 마운트 후 한 번만 실행

  • 초기 데이터 로딩에 사용

    ⇒ componentDidMount 역할

  1. deps 배열 있음
useEffect(() => {
console.log("count 변경 시 실행");
}, [count]);
  • 해당 값이 변경될 때만 실행

  • 이전 값 → 변경된 값 감지

    ⇒ componentDidUpdate

cleanup 함수

useEffect(() => {
const id =setInterval(() => {
console.log("running");
  },1000);

return() => {
clearInterval(id);
  };
}, []);

cleanup 실행 시점

  • 컴포넌트 언마운트 시
  • deps 변경으로 effect가 다시 실행되기 직전
  • 메모리 누수 방지 필수

useEffect와 렌더링 순서

  1. 컴포넌트 렌더링
  2. DOM 업데이트
  3. 브라우저 화면 표시
  4. useEffect 실행

렌더링을 막지 않는다 (비동기처럼 동작)

세부과정

useEffect는 컴포넌트의 생명주기 시점에 맞춰 부수 효과(side effect)를 실행하는 훅

  1. 마운트 시
    • 컴포넌트가 처음 렌더링된 후 한 번 실행
    • 초기 데이터 로딩, API 호출, 이벤트/구독 설정 등에 사용
  2. 업데이트 시
    • 의존성 배열에 포함된 값이 변경될 때마다 실행
    • 실행 순서
      1. 이전 effect의 클린업 함수 실행
      2. 변경된 state/props 기준으로 effect 본문 실행
  3. 언마운트 시
    • useEffect에서 return한 클린업 함수가 실행
    • 이벤트 제거, 타이머 해제, 구독 취소 등에 사용
  4. 의존성 배열 규칙
    • [ ] → 마운트 시 한 번만 실행
    • [value] → value가 변경될 때마다 실행
    • 생략 → 매 렌더링마다 실행

요약

useEffect는 렌더링 이후 실행되며, API 요청이나 이벤트 처리 같은 부수 효과를 관리하는 훅이다.

참고자료

  • https://ko.legacy.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update
  • https://velog.io/@sucream/%EA%B7%B8%EB%9E%98%EC%84%9C-useEffect%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%93%B0%EB%8A%94%EA%B1%B4%EB%8D%B0%EC%9A%94
  • https://jhbljs92.tistory.com/entry/7-useEffect

results matching ""

    No results matching ""