UseEffect

useEffect(() => {
    console.log('useEffect 실행');
}, []); 

결과값 

useEffect 실행
useEffect 실행

UseEffect 두 번 호출되는 경우가 생겨 원인을 분석해 보았습니다.

해결 방법

React.strictMode 제거

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

React.StrictMode는 개발 환경에서 애플리케이션에서 잠재적인 문제를 감지하고 경고를 표시하기 위한 도구입니다. useEffect가 두 번 실행되는 문제는 StrictMode가 렌더링 단계를 두 번 수행하여 발생할 수 있습니다.
만약 React.StrictMode를 사용할 필요가 없다면 제거하여 UseEffect가 두 번 실행되는걸 막을 수 있습니다.

렌더링을 두 번 실행하는 것은 개발 환경에서만 해당되는 문제이며, 실제로 애플리케이션이 프로덕션 환경에서 두 번 렌더링되지 않습니다.

React.StrictMode 사용할 경우

만약 개발 중에만 경고를 피하고 싶다면, React.StrictMode를 개발 환경에서만 사용하도록 설정할 수 있습니다. 이를 위해 process.env.NODE_ENV를 확인하여 개발 환경에서만 React.StrictMode를 적용하도록 설정할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const rootElement = document.getElementById('root');

if (process.env.NODE_ENV === 'development') {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} else {
  ReactDOM.createRoot(rootElement).render(<App />);
}

이렇게 설정하면, 개발 환경에서만 React.StrictMode가 활성화되고, 프로덕션 환경에서는 비활성화됩니다.