[문제 해결] 리액트 console이 2번씩 찍히는...

리액트를 처음 다룰 때 이 값이 잘 넘어왔는지 연결이 잘되는지를 확인하기 위해

주로 console에 아무거나 값을 찍어본다던지 event.target을 찍어본다던지

console을 자주 사용하는데 그때마다 콘솔이 2번씩 찍히곤 하는 경험을 한다. 

워낙 많은 사람들이 궁금해 하는 문제라서 그런지 구글링에 답이 수두룩하게 나와서

나도 정리를 해놓고자했다

---

리액트 console이 2번씩 찍히는 이유를 알기전에 먼저 StrictMode가 무엇인지를 알아야 한다

 

# StrictMode 란?

: 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구

-Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화

-애플리케이션 내 어디서든 strict모드 활성화 가능

 

StrictMode의 기능

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref사용에 대한 경고
• 권장되지 않은 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사
• Ensuring reusable state

 

# 리액트 console이 2번씩 찍히는이유

index.js에서 우리 컴포넌트가 <StrictMode>로 감싸져있기 때문이다

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

리액트 공식문서 Strict Mode의 예상치 못한 부작용 검사 부분을 확인해보면 알 수 있는데

렌더링 단계 생명주기 메서드들(constructor, render, setState, update function ...)은 여러 번 호출될 수 있기 때문에, 부작용을 포함하지 않는 것이 중요하다. 그렇지 않으면 메모리 누수 등 다양한 문제를 일으킬 수 있다. 하지만 이런 문제들은 예측한 대로 동작하지 않기 때문에 발견하기가 어렵다라고 한다

 

그래서, Strict 모드가 자동으로 부작용을 찾아주지는 못하지만, 몇몇 함수들을 의도적으로 이중 호출하여서 발견할 수 있게 한다고 한다

• 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
• 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
• 함수 컴포넌트 바디
• State updater 함수 (setState의 첫 번째 인자)
• useState, useMemo 그리고 useReducer에 전달되는 함수

 

#결론

버그가 아니라 정상적으로 작용하는 것이라고 한다

리액트 개발 모드에서는 2번씩 렌더링 되지만 배포 후에는 정상적으로 한번만 작동한다고 한다

개발환경에서도 두번씩 호출되는 것이 거슬린다면 index.js 파일에서 <React.StrictMode>를 지워주면 된다