[React] console.log()가 2번 출력되는 이유

프로젝트를 진행하면서 크롬 개발자 도구에서 console.log()를 확인할 경우 console 창에 2번 출력되는 경우가 있다.

 

왜 2번씩 출력되는 것인가?

그 이유를 구글에서 확인할 수 있었다.

 

 

Strict Mode

console.log가 2번 출력되는 이유는 프로젝트의 src/index.js 파일에서 <React.StrictMode> 태그 때문이다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다.

 

즉, 잠재적인 문제가 있는지 확인하기 위해서!

 

또한, Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다.

---

★ StrictMode는 아래와 같은 부분에서 도움이 된다. ★ 

(자세한 내용은 공식문서에서 확인할 수 있다.)

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

출처 React Strict Mode : https://ko.reactjs.org/docs/strict-mode.html

---

아래 코드는 일반적으로 create-react-app 후 생성되는 구조이다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />  // Strict 검사가 이루어진다.
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

아래 코드의 경우 Header와 Footer 컴포넌트는 Strict 모드 검사가 이루어지지 않는다. 하지만, ComponentOne과 ComponentTwo는 각각의 자손까지 검사가 이루어진다.

// src/index.js

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />  // Strict 검사가 이루어지지 않는다.
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />  // Strict 검사가 이루어지지 않는다.
    </div>
  );
}

 

console.log를 한번만 출력하려면?

<React.StrictMode/>태그를 제거하면 console.log를 한번만 출력할 수 있다.