【Node.js/React】두 번째 앱을 생성했다. 디버그 코드가 왜 두 번씩 출력되나?

1. What I did?

• 아래의 명령어를 실행하여 React앱을 생성했다.

npx create-react-app

• 어떻게 jQuery의 all-selector를 구현할까 하고 고민중이었다. 확인해 보지는 않았지만 findDOMNode같은 메소드를 사용하는 것은 배제했다. 그래서 다음과 같은 코드로 테스트를 감행해 봤다.

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

App.js

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

function App() {
  const elements = document.getRootNode();
  console.log(elements);
 
  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. How was it result?

디버그 코드가 두 번씩 출력된다.

---

3. I got something come to mind

useEffect가 떠올랐다. 그래서 테스트 코드를 다음과 같이 수정했다.

import { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const elements = document.getRootNode();

  useEffect(() => {
    console.log(elements);
  });
  
  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;

---

4. There is nothing changed

변화가 없다. 여전히 디버그 결과가 두 번씩 출력된다.

---

5. I got something come to mind one more thing

useEffect에 빈 배열을 파라미터로 넘겨주자

---

6. There is nothing changed too

역시나 결과가 똑같다. 두 번씩 출력된다.

---

7. Go to the country of search(I love Google and Stack Overflow!)

아래의 링크에서 답을 찾았다.
개발서버 상태에서 <React.StrictMode>는 두 번씩 콤포넌트를 렌더링한다고 한다.
 
Thank guys! You really helped me.
https://stackoverflow.com/questions/60618844/react-hooks-useeffect-is-called-twice-even-if-an-empty-array-is-used-as-an-ar

React Hooks: useEffect() is called twice even if an empty array is used as an argument

---

8. Fix the source

그래서 <React.StrictMode>를 삭제한 다음 다시 실행했다.
 
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(
    <App />
);

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

---

9. Result

디버그 결과가 한 번만 출력된다.