useEffect
⚙️ useEffect란?
정의
useEffect는 컴포넌트가 렌더링된 후 부수 효과(side effect)를 처리하기 위해 사용하는 React Hook이다.
데이터 요청, 이벤트 등록, DOM 조작, 구독 설정 같은 작업을 처리할 때 자주 사용한다.
🧩 언제 쓰는가?
- 컴포넌트가 처음 화면에 나타난 뒤 작업이 필요할 때
- 상태나 props 변화에 따라 작업을 다시 실행해야 할 때
- 이벤트 리스너나 구독을 등록하고 해제해야 할 때
- API 호출 후 상태를 갱신해야 할 때
🛠️ 기본 사용 예시
import { useEffect } from "react";
function MyComponent() {
useEffect(() => {
console.log("컴포넌트가 렌더링된 후 실행된다.");
return () => {
console.log("언마운트되기 전에 정리한다.");
};
}, []);
return <div>Example</div>;
}
📚 의존성 배열
| 의존성 배열 | 실행 시점 |
|---|---|
[] |
처음 렌더링될 때 한 번만 실행 |
[value] |
value가 바뀔 때마다 실행 |
| 생략 | 렌더링될 때마다 실행 |
🔄 데이터 요청 예시
import { useEffect, useState } from "react";
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch("https://api.example.com/data");
const result = await response.json();
setData(result);
};
fetchData();
}, []);
return (
<div>
{data ? <div>Data: {JSON.stringify(data)}</div> : <div>Loading...</div>}
</div>
);
}
🧰 이벤트 등록과 정리
import { useEffect } from "react";
function ResizeComponent() {
useEffect(() => {
function handleResize() {
console.log("Window resized");
}
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return <div>Resize the window and check the console!</div>;
}
⚠️ 주의점
- 의존성 배열을 빠뜨리면 불필요한 반복 실행이 생길 수 있다.
- 너무 많은 작업을 한
useEffect에 몰아넣지 않는다. - 정리 함수가 필요한 작업은 반드시 해제 로직까지 같이 둔다.
📌 정리
useEffect는 렌더링 후 처리해야 하는 작업에 사용한다.- 의존성 배열과 정리 함수를 이해하는 것이 중요하다.
React-LifeCycle과 함께 보면 실행 흐름이 더 잘 보인다.
댓글남기기