React의 useEffect 훅은 컴포넌트의 생명주기(lifecycle)와 관련된 작업을 수행할 때 사용됩니다. 이를 활용하면 마운트, 업데이트, 언마운트 시점에서 특정 로직을 실행할 수 있습니다.
1. useEffect 훅 기본 개념
useEffect는 React 컴포넌트에서 사이드 이펙트를 처리하기 위해 사용하는 훅입니다. 주로 데이터 가져오기(API 호출), DOM 업데이트, 타이머 설정과 같은 작업을 수행할 때 활용됩니다.
기본 문법
import React, { useEffect } from 'react';
function ExampleComponent() {
useEffect(() => {
console.log('컴포넌트가 렌더링되었습니다.');
});
return <div>useEffect 기본 사용법</div>;
}위 코드는 ExampleComponent가 렌더링될 때마다 useEffect 내부의 코드가 실행됩니다.
2. 마운트, 업데이트, 언마운트 타이밍 다루기
가. 마운트 시점에서 실행
컴포넌트가 처음으로 렌더링될 때만 실행하고 싶다면 useEffect의 두 번째 인자로 빈 배열([])을 전달합니다.
useEffect(() => {
console.log('컴포넌트가 마운트되었습니다.');
}, []); // 빈 배열을 전달하면 최초 1회만 실행됨이렇게 하면 컴포넌트가 마운트될 때 한 번만 실행됩니다.
나. 업데이트 시점에서 실행
특정 상태(state)가 변경될 때마다 실행되도록 만들려면 useEffect의 두 번째 인자로 해당 상태를 배열에 추가합니다.
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`count 값이 변경됨: ${count}`);
}, [count]); // count 값이 변경될 때마다 실행됨
return (
<div>
<p>카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}이렇게 하면 count 값이 변경될 때마다 useEffect가 실행됩니다.
다. 언마운트 시점에서 실행
컴포넌트가 제거될 때(clean-up)를 수행하려면 useEffect 내부에서 return 문을 사용하여 정리(clean-up) 함수를 반환하면 됩니다.
useEffect(() => {
console.log('컴포넌트가 마운트됨');
return () => {
console.log('컴포넌트가 언마운트됨');
};
}, []);위 코드는 컴포넌트가 마운트될 때 실행되고, 컴포넌트가 제거될 때 정리(clean-up) 함수가 실행됩니다.
3. useEffect 훅을 활용한 실전 예제
가. API 호출 예제
import React, { useState, useEffect } from 'react';
function FetchData() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => response.json())
.then((json) => setData(json));
}, []);
return (API 데이터
{JSON.stringify(data, null, 2)}); }위 코드는 API에서 데이터를 가져와 화면에 출력하는 간단한 예제입니다. 마운트될 때 한 번만 실행되도록 설정되었습니다.
나. 타이머 설정 예제
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 <p>타이머: {seconds}초</p>;
}이 코드는 컴포넌트가 마운트되면 1초마다 seconds 값을 증가시키고, 언마운트되면 타이머를 정리합니다.
4. useEffect 사용 시 주의할 점
가. 의존성 배열 사용 시 주의
- 의존성 배열을 정확하게 설정하지 않으면 무한 루프가 발생할 수 있습니다.
useEffect(() => {
console.log('무한 루프 발생!');
}, [Math.random()]); // 매번 새로운 값이 들어가면서 무한 실행됨나. 불필요한 렌더링 방지
- 불필요한 상태 변경이 발생하면 useEffect가 여러 번 실행될 수 있습니다. 이를 방지하려면 상태 변경 로직을 최적화해야 합니다.
5. 정리
React의 useEffect 훅을 활용하면 컴포넌트의 라이프사이클을 효과적으로 관리할 수 있습니다.
- 마운트 시 실행 → useEffect(() => {}, [])
- 업데이트 시 실행 → useEffect(() => {}, [state])
- 언마운트 시 실행 → useEffect(() => { return () => {}; }, [])
또한 API 호출, 타이머 설정 등의 다양한 기능을 처리할 수 있으며, 의존성 배열을 올바르게 설정하여 최적화하는 것이 중요합니다.
위 개념을 활용하여 React 프로젝트에서 효과적으로 상태 관리 및 비동기 작업을 처리해 보세요.
