React의 useEffect는 컴포넌트에서 사이드 이펙트를 처리하는 훅으로, 렌더링 후 특정 작업을 수행하거나 정리하는 데 사용된다. 이 훅을 잘못 사용하면 무한 루프에 빠질 수 있다. 이 글에서 useEffect의 의존성 배열이 어떻게 작동하는지, 그리고 무한 루프를 방지하기 위한 팁을 예시와 함께 알아보자.
1. useEffect 기본 구조
useEffect(() => {
// 이펙트 내용
return () => {
// 정리 작업 (optional)
};
}, [dependency1, dependency2]);- 첫 번째 인자: 콜백 함수로, 의존성 값이 변경될 때마다 실행
- 두 번째 인자: 의존성 배열. 이 배열에 있는 값이 변경될 때만
useEffect가 재실행. 배열을 비우면, 컴포넌트가 처음 마운트될 때만 한 번 실행.
2. 의존성 배열의 작동 방식
- 빈 배열 (
[]):useEffect는 컴포넌트가 처음 렌더링될 때 한 번만 실행. - 값이 있는 배열: 배열 내 값이 변경될 때마다
useEffect가 다시 실행. - 배열 생략 시:
useEffect는 매번 컴포넌트가 렌더링될 때마다 실행.
예시: 빈 배열을 사용한 useEffect
useEffect(() => {
console.log('컴포넌트가 처음 마운트되었습니다.');
}, []); // 빈 배열: 처음 렌더링 시에만 실행이 경우, useEffect는 컴포넌트가 처음 마운트될 때만 실행되고 이후에는 다시 실행되지 않는다.
3. 무한 루프를 방지하는 방법
useEffect를 사용할 때 상태 변경 로직을 잘못 관리하면 무한 루프에 빠질 수 있다. 무한 루프는 보통 useEffect 내에서 상태를 업데이트하면서 의존성 배열에 해당 상태를 포함할 때 발생한다.
잘못된 예시: 무한 루프 발생 코드
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1); // 상태 업데이트
}, [count]); // count 변경 시마다 useEffect 재실행위 코드에서는 count가 업데이트될 때마다 useEffect가 실행되고, 그 안에서 setCount가 다시 count를 변경하므로 무한 루프에 빠진다.
무한 루프 방지: 올바른 예시
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setTimeout(() => {
setCount((prevCount) => prevCount + 1);
}, 1000);
return () => clearTimeout(timer); // 정리 작업으로 타이머 제거
}, []); // 빈 배열: 처음 마운트 시에만 실행이 코드는 useEffect가 한 번만 실행되며, 이후 타이머를 통해 1초마다 count를 업데이트한다. 의존성 배열을 빈 배열([])로 설정해 무한 루프를 방지할 수 있다.
4. 의존성 배열을 효과적으로 사용하는 방법
useEffect의 의존성 배열을 올바르게 설정하는 것이 무한 루프를 방지하는 핵심이다. 다음은 의존성 배열 사용 시 고려할 몇 가지 팁이다.
-
필요한 값만 배열에 넣기:
useEffect내에서 참조하는 모든 값들을 의존성 배열에 포함시켜야 함. 그렇지 않으면, 원하는 동작이 발생하지 않을 수 있음. -
빈 배열로 설정: 컴포넌트가 마운트될 때 한 번만 실행하고 싶을 때는 빈 배열을 사용.
-
비동기 작업 관리: 비동기 작업이 있을 때는 클린업(cleanup) 함수를 통해 정리 작업을 설정하는 것이 중요함.
결론
React에서 useEffect를 제대로 사용하는 것은 효율적인 상태 관리와 성능 최적화의 핵심이다. 의존성 배열을 통해 언제 사이드 이펙트가 실행될지를 제어할 수 있으며, 잘못된 설정으로 무한 루프에 빠지지 않도록 주의해야 한다.
