useEffect 의존성배열 x

이대현·2024년 6월 18일

react

목록 보기

5/9

의존성 배열을 생략하고 useEffect를 사용하는 경우는 드뭅니다. 대부분의 상황에서는 의존성 배열을 명시적으로 설정하는 것이 성능 면에서도 효율적이고, 예기치 않은 부작용을 방지할 수 있습니다. 그러나 의존성 배열을 생략해야 하는 몇 가지 특별한 경우가 있을 수 있습니다:

1. 모든 렌더링 후에 특정 작업을 수행해야 할 때

예를 들어, 렌더링이 완료된 후 특정 DOM 조작이 필요하거나 매번 상태를 초기화해야 하는 작업이 있을 때 유용합니다.
컴포넌트가 상태나 props의 변화와 상관없이 항상 실행되어야 하는 경우입니다.
```
useEffect(() => {
    console.log('Component has been rendered');
});
```

2. 이전 상태값을 기반으로 작업을 수행해야 할 때

이전 상태값을 기반으로 새로운 부수 효과를 설정하거나 clean-up 작업을 수행해야 할 경우 의존성 배열을 생략할 수 있습니다.

useEffect(() => {
    const timer = setTimeout(() => {
        console.log('Timer triggered');
    }, 1000);

    return () => clearTimeout(timer); // Clean-up
});

3. 컴포넌트가 항상 최신 props와 상태를 반영해야 할 때

이 경우 useEffect는 상태나 props의 변화를 감지하고 항상 최신 값을 사용하여 부수 효과를 실행합니다.

특히, 부수 효과가 모든 상태와 props에 의존하는 경우 유용합니다.

useEffect(() => {
    function handleEvent() {
        console.log('Event handled', someState, someProps);
    }

    window.addEventListener('resize', handleEvent);

    return () => window.removeEventListener('resize', handleEvent);
});

4. 컴포넌트 라이프사이클 메서드를 대체할 때

componentDidMount, componentDidUpdate, componentWillUnmount를 하나로 합쳐서 사용할 때 유용합니다.

예를 들어, 모든 재렌더링 이후 또는 특정 타이밍에 DOM 상태를 업데이트하거나 데이터를 fetch해야하는 경우.

useEffect(() => {
    console.log('Component rendered or updated');
    // API call or other side effects 

    return () => {
        console.log('Cleanup or prepare for next render');
    };
});