문제현상
프로젝트를 진행하던 도중 한번만 실행되어야 할 useEffect 속 console.log가 콘솔창에서 두번씩 출력되는 현상을 발견하게 되었습니다.
구현을 하는데 있어 문제가 없었으나 이유를 알고싶어서 검색해본 결과 React.StrictMode 때문이라는것을 알게되었습니다.
React.StrictMode란?
자바스크립트에서는 엄격 모드가 존재하는데, 코드 파일 상단에 use strict 를 써 놓으면 자바스크립트를 실행할 때 조금 더 엄격하게 코드를 검사합니다.
리액트도 이처럼 유사한 목적으로 사용되는 React.StrictMode가 존재합니다.
Strict 모드를 사용하면 리액트가 자식 컴포넌트를 검사하고 잘못 사용된 부분을 우리에게 알려줍니다. 이런 경고 메세지를 보면서 리액트를 사용하면 어플리케이션에 잠재된 문제를 미리 해결할 수 있습니다.
StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
출처 : 리액트 공식문서
위의 코드처럼 보통 프로젝트의 src/index.js 파일 내에 <React.StrictMode> 태그로 이 감싸져있습니다. 애플리케이션 내 어디서든지 <React.StrictMode> 태그로 감싸주면 strict 모드를 활성화할 수 있습니다. 그러면 개발모드에서 (개발 단계시 오류를 잘 잡기위해) 두 번씩 렌더링됩니다.
따라서 개발단계에서 리액트가 제공하는 일종의 검사 도구라고 생각하면 됩니다.
콘솔로그가 두번씩 찍히는 현상을 방지하고 싶다면 <React.StrictMode>를 지우면 됩니다.
💡
<React.StrictMode>는 개발 모드에서만 적용되기때문에 생명주기 메서드들은 프로덕션 모드에서 이중으로 호출되지 않으므로 로직에는 전혀 문제가 없습니다
