👀 개요

프로젝트 진행 중 서버에서 데이터를 받아 디스플레이하는 기능을 테스트 중이었다.

개발 중 console.log() 함수를 사용해 결과를 콘솔에 출력해 테스트하는 경우가 많은데,

어느날 콘솔을 보다가 문득 위화감을 느꼈다.

(5) [{…}, {…}, {…}, {…}, {…}]
(5) [{…}, {…}, {…}, {…}, {…}]

분명히 페이지 초기 로드 시 처음 서버로부터 데이터를 한 번 받아온 후, 사용자가 별다른 조작을 하지 않는다면 추가적으로 데이터를 요청할 일이 없는데도 데이터 요청을 두 번씩 하고 있었다.

useEffect를 사용해 페이지 초기 로드 시 동작을 구현하고 있었기 때문에, 코드를 살펴봤지만 특별히 문제 되는 부분이 보이지 않았다.

무엇보다 초기 로드 이후 사용자가 추가적인 조작을 했을 때 (페이지 변경, 특정 게시글 페이지로 이동했다가 다시 게시글 목록으로 돌아오는 경우)에는 정상적으로 데이터를 한 번만 요청하고 있었기 때문에, 원인이 다른 데 있을 것이라고 생각했다.

그리고 원인을 찾아보다가 프로젝트를 처음 구성할 때 사용했던 create-react-app 이 자동으로 적용한 React.StrictMode 때문임을 알게 되었다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

🤔 React.StrictMode?

공식문서를 참고해 정리한 React.StrictMode는 다음과 같다.

<React.StrictMode> 내부의 컴포넌트 트리에 대해 개발 모드에서의 추가적인 동작을 가능하게 해주며, 그 동작들은 아래와 같다.

1. 불순한(impure) 렌더링을 통해 발생할 수 있는 버그들을 찾기 위해 컴포넌트들이 추가적으로 재렌더링(re-rendering) 된다.

2. Effect cleanup의 부재로 인해 발생할 수 있는 버그들을 찾기 위해 컴포넌트의 이펙트들이 추가적으로 재렌더링된다.
3. 컴포넌트들이 Deprecated(미지원, 혹은 미지원될) API들을 사용하는지 검사한다.

📝 먼저 용어들을 정리해보자

• 컴포넌트(Component)
  • React가 화면에서 UI 요소를 구분할 때 사용하는 일종의 ‘단위’ 로서, React에서 앱을 이루는 가장 작은 조각이라고 할 수 있다.
• 렌더링(Rendering)?
  • React에서 컴포넌트의 UI를 생성하고 표시하는 과정을 의미한다.