useEffect(() => {
console.log("처음");
}, []);이 코드를 작성함으로써 브라우저에서 처음 접근할 때 한 번 렌더링 되면서 로그가 한 번만 찍힐 것이라고 예상했지만, 실제로는 두 번 찍혔다.
GPT의 답
브라우저를 리프레시했을 때 useEffect의 콘솔 로그가 두 번 찍히는 이유는 React.StrictMode 때문일 가능성이 큽니다. React.StrictMode는 개발 모드에서 잠재적인 문제를 감지하기 위해 일부 생명주기 메서드(생성자, render, useEffect 등)를 두 번 호출합니다. 이는 의도적으로 설계된 기능으로, 컴포넌트가 순수하지 않거나 부작용을 갖고 있을 때 문제를 발견하기 쉽게 하기 위함입니다.
React.StrictMode가 원인인 경우
StrictMode는 개발 환경에서만 활성화되며, 배포 환경에서는 영향을 미치지 않습니다. StrictMode는 다음과 같이 사용됩니다:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);이 모드에서 useEffect 훅은 마운트 해제 후 재마운트되는 과정을 통해 두 번 호출됩니다. 따라서 두 번의 로그가 발생합니다.
해결 방법
- StrictMode 유지: StrictMode를 유지하면서 개발 중에 의도된 동작임을 인지하고 문제를 발견하고 수정하는 데 집중합니다.
- StrictMode 비활성화: 개발 중 이 동작을 원하지 않는다면 StrictMode를 비활성화할 수 있습니다. 하지만 이는 권장되지 않습니다. StrictMode는 유용한 개발 도구이기 때문입니다.
StrictMode를 유지한 코드
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);StrictMode를 비활성화한 코드 (권장되지 않음)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);결론
useEffect가 두 번 실행되는 것은 React.StrictMode에 의한 의도된 동작입니다. 이는 개발 환경에서만 발생하며, 배포 환경에서는 발생하지 않습니다. 따라서 특별한 문제를 일으키지 않는 한 StrictMode를 유지하고, 이 동작이 의도된 것임을 인지하고 개발하는 것이 좋습니다.
