React에서 렌더링이 두 번 발생하는 이유와 해결 방법

📖 서론

리액트로 개발을 하다 보면 렌더링이 두 번 발생한다.
처음에는 신경쓰지 않고 넘겼는데, alert가 두 번이나 뜨니 신경이 쓰일 수 밖에 없어서 알아봤다.

✅ 왜 이럴까?

이런 현상이 발생하는 이유는 React.StrictMode 때문이다.
CRA로 생성된 리액트 프로젝트는 자동으로 설정되어 있기 때문에 발생하게 되는 것.
리액트 공식 문서에도 명시되어 있다.

• Strict 모드
  StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
• 주의
  Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.
• StrictMode는 아래와 같은 부분에서 도움이 됩니다.
  1.안전하지 않은 생명주기를 사용하는 컴포넌트 발견
  2.레거시 문자열 ref 사용에 대한 경고
  3.권장되지 않는 findDOMNode 사용에 대한 경고
  4.예상치 못한 부작용 검사
  5.레거시 context API 검사
  6.Ensuring reusable state

즉, 개발 모드일 때만 활성화 되는 모드이기 때문에 신경 쓰지 않고 개발 하면 된다.
그럼에도 비활성화를 할 필요가 있다면 아래의 방법으로 진행하면 된다.

✅ Strict 모드 비활성화 하기

비활성화 하는 방법은 정말 간단하다.

📌 React에서 비활성화 하기

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      //<React.StrictMode> // Wrapper 제거
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      //</React.StrictMode>
      <Footer />
    </div>
  );
}

📌 Next.JS에서 비활성화 하기

Next.JS는 React와 다르게 next.config.js 에서 설정 할 수 있다.

//next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, //true > false
  swcMinify: true,
};

module.exports = nextConfig;

📌 참고
[React] 리액트 렌더링이 두 번 발생하는 이유
React 공식 문서 - Strict 모드