[React] 리액트 라이브러리 hook의 useEffect

useEffect

useEffect는 React의 Hook 중 하나로, 컴포넌트가 렌더링된 이후에 어떤 작업을 수행하기 위해 사용됩니다. useEffect는 클래스형 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 함수형 컴포넌트에서도 사용할 수 있도록 해줍니다. 주로 다음과 같은 용도로 사용됩니다:

 

1. 데이터 가져오기:
   • API 호출을 통해 데이터를 가져올 때 사용됩니다.
2. 구독 설정 및 해제:
   • 웹소켓 연결이나 이벤트 리스너를 설정하고, 컴포넌트가 언마운트될 때 이를 정리하는 데 사용됩니다.
3. DOM 업데이트:
   • 컴포넌트가 렌더링된 후 DOM을 직접 조작해야 하는 경우 사용됩니다.
4. 타이머 설정:
   • setTimeout 또는 setInterval을 설정하고 이를 정리할 때 사용됩니다.

useEffect는 다음과 같은 형식으로 사용됩니다:

import React, { useEffect } from 'react';

const MyComponent = () => {
    useEffect(() => {
        // 여기서 작업을 수행합니다.

        return () => {
            // 이 함수는 컴포넌트가 언마운트될 때 실행됩니다.
            // 또는 의존성 배열의 값이 변경될 때 이전 effect를 정리합니다.
        };
    }, []); // 의존성 배열

    return (
        <div>
            {/* 컴포넌트 내용 */}
        </div>
    );
};

 

위 코드에서 useEffect는 다음과 같은 부분으로 구성됩니다:

• 첫 번째 인자: 효과 함수 (effect function)
  • 이 함수는 컴포넌트가 렌더링된 후 실행됩니다.
• 두 번째 인자: 의존성 배열 (dependency array)
  • 이 배열에 지정된 값이 변경될 때마다 효과 함수가 다시 실행됩니다.
  • 빈 배열 []을 전달하면, 이 효과는 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.

예제

1. 데이터 가져오기 예제:

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('https://api.example.com/data');
            const result = await response.json();
            setData(result);
        };

        fetchData();
    }, []); // 빈 배열이므로 컴포넌트가 처음 마운트될 때만 실행됨

    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
};

export default DataFetchingComponent;

2. 타이머 설정 예제:

import React, { useState, useEffect } from 'react';

const TimerComponent = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        const timer = setInterval(() => {
            setCount(prevCount => prevCount + 1);
        }, 1000);

        return () => {
            clearInterval(timer); // 컴포넌트가 언마운트될 때 타이머 정리
        };
    }, []); // 빈 배열이므로 컴포넌트가 처음 마운트될 때만 실행됨

    return (
        <div>
            {count}
        </div>
    );
};

export default TimerComponent;

 

이렇게 useEffect를 사용하면 함수형 컴포넌트에서도 다양한 부수 효과(side effects)를 처리할 수 있습니다.