[Tip] React에서 두 번 찍히는 console.log

2번 찍히는 현상

위와 같이  console.log()  로 값을 찍어보면 두번씩 출력 되는 현상이 나타났습니다.

렌더링 두번 발생 됬는지 추측해 볼 수 있습니다.

 

결론은  <React.StrictMode></React.StrictMode>  때문 입니다.  index.js  소스를 확인해 보면 해당 태그로 둘러 쌓여 있는 것을 확인 할 수 있습니다.

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

Strict 모드는 Fragment와 같이 동작하며 (단순히 감싸는 것), child까지 모두 엄격하게 검사 한다고 생각 하면 됩니다.

 

Strict 모드가 자동으로 부작용을 찾아 주는 것은 불가능 합니다. 하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와 줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있습니다.

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

주의
개발 모드에서만 적용 됩니다. 생명주기 메서드들은 프로덕션 모드에서 이중으로 호출 되지 않습니다.

 

참고 : https://driip.me/64586fb1-a81a-4c59-b3bb-c4333e0101d9