January 08, 2025

useEffect가 호출되는 시점

답변 확인

React의 useEffect 호출 시점 정리

기본 정의

useEffect는 컴포넌트의 마운트, 업데이트, 언마운트 시점에 특정 작업을 실행하도록 정의하는 React 훅입니다. 주로 초기 데이터 로드, 상태 변화 처리, 정리 작업 등에 사용

1. 마운트 시 호출

컴포넌트가 처음 렌더링되어 DOM에 추가 되는 시점

useEffect는 컴포넌트가 마운트될 때, 즉, 처음 렌더링되고 나서 호출
사용 목적 :
- 초기 데이터 로드 (예 : API호출 )
- 구독 설정 (예:이벤트 리스너 등록)
- 상태 초기화
실생활 예시 :
- 쇼핑몰 초기 화면에서 상품 데이터를 서버에서 가져오기
- 채팅 앱에서 새로운 메시지 구독 시작

예시 코드: 초기 데이터 로드

import React, { useEffect, useState } from 'react';
 
function ProductList() {
    const [products, setProducts] = useState([]);
 
    useEffect(() => {
        fetch('https://api.example.com/products')
            .then((response) => response.json())
            .then((data) => setProducts(data));
    }, []); // 마운트 시 API 호출
 
    return (
        <ul>
            {products.map((product) => (
                <li key={product.id}>{product.name}</li>
            ))}
        </ul>
    );
}

2. 업데이트 시 호출

컴포넌트의 상태(state)나 props가 변경되어 다시 렌더링되는 시점

useEffect는 의존성 배열에 지정된 값이 변경될 때마다 다시 호출
사용 목적:
- 특정 상태 또는 props 변화에 따른 작업 수행
- 동적으로 실행되는 로직 처리
실생활 예시:
- 검색어 입력에 따라 검색 결과 업데이트
- 음악 재생 앱에서 볼륨이나 트랙 변경 시 동작

예시 코드: 검색어에 따른 결과 갱신

import React, { useState, useEffect } from 'react';
 
function Search() {
    const [query, setQuery] = useState('');
    const [results, setResults] = useState([]);
 
    useEffect(() => {
        if (query) {
            fetch(`https://api.example.com/search?q=${query}`)
                .then((response) => response.json())
                .then((data) => setResults(data.items));
        }
    }, [query]); // query가 변경될 때마다 실행
 
    return (
        <div>
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="검색어를 입력하세요"
            />
            <ul>
                {results.map((item) => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}

3. 언마운트 시 호출 (클린업)

언마운트 : 컴포넌트가 DOM에서 제거되는 시점

useEffect의 return 값으로 정의된 함수가 호출됩니다.
사용 목적:
- 타이머 해제
- 이벤트 리스너 제거
- 구독 취소
실생활 예시:
- 지도 애플리케이션에서 위치 추적 기능 해제
- 비디오 스트리밍 앱에서 재생 중인 스트림 종료

예시 코드: 타이머 관리

import React, { useState, useEffect } from 'react';
 
function Timer() {
    const [seconds, setSeconds] = useState(0);
 
    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds((prev) => prev + 1);
        }, 1000);
 
        return () => clearInterval(interval); // 언마운트 시 정리
    }, []);
 
    return <div>타이머: {seconds}초</div>;
}

4. 의존성 배열에 따른 동작 요약

의존성 배열	동작 설명
[]	마운트될 때 한번만 실행
[값1, 값2]	배열 안의 값이 변경될 때마다 실행.
없음 (useEffect())	모든 렌더링 시점마다 실행 (상태 변화와 상관없이 계속 실행되므로 주의).

결론

마운트: 컴포넌트가 처음 렌더링될 때 실행. 주로 초기화 작업에 활용.
업데이트: 상태나 props 변화에 따라 실행. 동적 로직 처리에 사용.
언마운트: 컴포넌트가 제거될 때 실행. 정리 작업에 필요.
useEffect는 실생활 서비스에서 초기 데이터 로드, 상태 변화 반응, 정리 작업 등을 효율적으로 처리하는 강력한 도구