UseEffect가 두번 실행되는 이유

date

Oct 11, 2024

slug

why-UseEffect-run-twice

author

status

Public

1. UseEffect란 무엇인가?

문제를 해결하기 위해선 먼저 UseEffect에 대해서 알아야 한다고 생각합니다. useEffect는 리액트에서 제공하는 Hook 중 하나로, 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 도와줍니다. 대표적으로 다음과 같은 상황에서 활용됩니다.

1-1 마운트될 때만 실행하기

컴포넌트가 처음 화면에 나타날 때 한 번만 실행되게 하고 싶다면 useEffect의 두 번째 인자로 빈 배열([])을 전달하면 됩니다.


useEffect(() => {
    console.log('마운트 될 때만 실행');
  }, []);

1-2 특정 값이 업데이트될 때 실행하기


useEffect(() => {
    console.log('특정 값이 업데이트될 때 실행됩니다.');
}, [value]);

이와 같이 useEffect는 렌더링 직후에 실행되며, 두 번째 파라미터에 따라 실행 조건을 설정할 수 있습니다.

UseEffect가 두 번 실행되는 이유

useEffect가 두 번 실행되는 현상은 주로 React의 Strict Mode 때문입니다.

2-1. Strict Mode란 무엇인가?

StrictMode는 리액트에서 제공하는 개발 도구로, 코드에서 잠재적인 문제를 감지하고 경고를 제공합니다. 특히 다음과 같은 문제를 사전에 잡아줍니다:

안전하지 않은 생명 주기 메서드 감지

권장되지 않는 API 사용 경고

예상치 못한 사이드 이펙트 확인

이 도구는 개발 모드에서만 동작하며, 컴포넌트를 한 번 더 렌더링하고 언마운트했다가 다시 마운트하는 방식을 사용해 잠재적인 문제를 확인합니다.


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

해결 방법

Strict Mode는 배포 환경에서는 비활성화되므로, 사실 두 번 실행되는 현상은 개발 단계에서만 발생합니다. 하지만 테스트 시 혼란을 줄이기 위해 다음 방법을 고려할 수 있습니다.

3-1. Strict Mode 제거하기

StrictMode를 사용하지 않도록 설정하면 useEffect가 두 번 실행되는 문제를 방지할 수 있습니다.


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

주의: Strict Mode를 제거하면 개발 단계에서 잡을 수 있는 잠재적 문제를 놓칠 수 있으므로, 꼭 필요한 경우에만 사용하지 않는 것을 권장합니다.

3-2. 실제 배포 환경에서는 문제없음

배포 환경에서는 Strict Mode가 비활성화되므로, useEffect는 정상적으로 한 번만 실행됩니다.

따라서 개발 모드에서만 발생하는 문제라면 큰 걱정 없이 그대로 두어도 됩니다

4. 마무리

useEffect가 두 번 실행되는 이유는 Strict Mode의 의도된 동작 때문입니다. Strict Mode는 리액트 앱의 안정성과 코드 품질을 높이는 데 유용하므로, 개발 단계에서는 이를 유지하면서 작업하는 것이 좋습니다. 하지만 테스트 환경에서 혼란을 줄이고 싶다면, Strict Mode를 비활성화하거나 배포 환경에서만 확인하는 방법도 있습니다.