리액트 라이프사이클 메서드를 공부하던 중, 콘솔창을 확인해가면서 언제 어떤 메서드가 출력되는지 확인하는 실습을 했다. 그런데 계속 콘솔창에 콘솔 메시지가 두 번씩 나와서 이유를 찾아보았다. 별건 아니었지만 그래도 알고 있으면 좋은 내용이라서 기록으로 남긴다.
요로코롬 두번씩 class => render 과 class => componentDidMount가 찍히는 것을 발견했다.
이 이유를 찾아보니,
"StrictMode"
때문이었다.
index.js 안에 있는
<StrictMode></StrictMode>를 제거 하니 한번씩만 찍혔다:)
자세히 설명하면,
💡 What is StrictMode?
: StrictMode는 리액트에서 제공하는 검사 도구이다.
개발 모드일때만 디버그를 한다. 그러면서 안전하지 않은 생명주기를 가진 컴포넌트를 검사하거나, 배포 후 문제가 될만한 이슈들을 미리 잡는 모드라고 보면 되겠다. create-react-app으로 리액트 앱을 생성하면 기본적으로 생성된다.
검사를 그럼 어떻게 하느냐?
" 렌더링 단계에서 의도적으로 함수를 두 번 호출한다고 한다."
React는 사용자의 상호작용이 일어나지 않으면 렌더링 단계에서 어떠한 결과도 변경되지 않는다. 따라서 StrictMode는 초기 렌더링이 끝난 후 함수를 한번 더 호출하여 결과값에 변화가 있는지 확인하고, 그 변화로 오류를 감지할 수 있다.
사진에서 보았듯이 componentWillMount는 한번만 콘솔에서 확인할 수 있지만 render부터는 두번씩 입력되는 것을 발견할 수 있다.
그리고 개발단계에서만 렌더링을 두번 하면서 검사하기 때문에 거슬리지만 않는다면 문제 없다고 한다 ^^
