React 프로젝트에서 중복되는 콘솔 출력 숨기기

안녕하세요 여러분, 오늘은 CRA 으로 생성된 React 프로젝트에서 콘솔 반복 문제를 해결하는 방법을 알려드리겠습니다. 이 콘솔 복제 문제를 일으키는 것은 엄격 모드입니다. 콘솔의 중복 문제가 귀찮으시면 리액트 개발자를 통해 이 중복 콘솔 출력을 숨길 수 있습니다. 이 콘솔 복제 문제를 해결하는 방법을 살펴보겠습니다.

우리는 프로젝트를

npx create-react-app <my-app>

로 프로젝트를 실행하십시오.

yarn start

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 />
  </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();

console.log('Hello react')에 App.js를 추가합니다. App.js 출력은 다음과 같습니다.

import logo from './logo.svg';
import './App.css';

const App = () => {
  console.log('Hello react');

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

이제 이 경우 개발자 도구에서 콘솔을 열고 어떤 일이 발생하는지 살펴보겠습니다.



흠.. 콘솔 화면에 2 Hello react 문자가 보이는 것 같습니다. 그러나 우리는 하나를 썼습니다. 이것은 불투명도가 낮은 리액트 엄격 모드로 표시되는 콘솔 출력입니다. 이 기능을 끄려면 이 react devtools를 통해 중복 로그 값을 숨기는 기능을 활성화하기만 하면 됩니다.





타다아 🎉🎉
console.log는 출력을 한 번 보여줍니다.

이 문제를 해결하는 방법에 대해 자세히 알아보려면 관련 PR을 확인할 수 있습니다.