Strict Mode로 인한 토스트 두 번 출력 문제 해결

 

picky 프로젝트 개발시에 토스트가 두 번씩 출력되는 문제를 발생했습니다.서칭 결과 이 문제는 React의 개발 단계에서만 발생하는 현상으로, Strict Mode의 특성 때문에 생기는 일입니다. 이 글에서는 왜 이런 현상이 발생하는지, 그리고 이를 어떻게 해결할 수 있는지에 대해 알아보았습니다.😊

 

---

Strict Mode란?

React의 Strict Mode는 개발 단계에서 잠재적인 문제를 감지하고 경고를 제공하기 위해 사용됩니다. React 공식 문서에 따르면, Strict Mode는 안전하지 않은 코드 패턴을 확인하고 경고하며, 일부 함수형 컴포넌트의 이펙트를 두 번 호출하는 동작을 포함합니다.

Strict Mode 주요 기능:

• 컴포넌트의 사이드 이펙트 감지
• useEffect 클린업 함수 확인
• React 렌더링 관련 문제 탐지

---

문제 원인: 토스트 두 번 출력

Strict Mode에서 React는 컴포넌트 마운트 및 언마운트 과정을 두 번 수행하여 예상치 못한 결과를 발생시킬 수 있습니다. 예를 들어, 토스트 메시지를 출력하는 로직이 아래와 같다고 가정해 봅시다:

 

import { toast } from 'react-toastify';

function ExampleComponent() {
  React.useEffect(() => {
    toast('Hello, World!');
  }, []);

  return <div>Example Component</div>;
}

 

Strict Mode에서는 useEffect가 두 번 호출되어, 토스트가 두 번 출력됩니다. 이는 배포 환경에서는 발생하지 않지만, 개발 단계에서 혼란을 줄 수 있습니다.

---

해결 방법

1. Strict Mode 비활성화

가장 간단한 해결 방법은 Strict Mode를 비활성화하는 것입니다. next.config.js에서 reactStrictMode 옵션을 false로 설정하면 됩니다.

// next.config.js
module.exports = {
  reactStrictMode: false,
};

!주의: Strict Mode는 React의 최적화 및 안전한 코드 작성을 돕기 때문에, 단순히 비활성화하는 것은 권장되지 않습니다. 이 방법은 문제의 임시 해결에만 적합합니다.

---

2. 상태 플래그를 사용한 방지

useRef를 활용해 첫 번째 렌더링 이후에만 동작하도록 코드를 수정할 수 있습니다.

import { toast } from 'react-toastify';
import React, { useEffect, useRef } from 'react';

function ExampleComponent() {
  const didMount = useRef(false);

  useEffect(() => {
    if (didMount.current) {
      toast('Hello, World!');
    } else {
      didMount.current = true;
    }
  }, []);

  return <div>Example Component</div>;
}

이 코드는 첫 번째 렌더링에서는 아무 작업도 하지 않고, 이후 렌더링부터 동작하도록 합니다. 이를 통해 Strict Mode에서도 토스트가 한 번만 출력되도록 할 수 있습니다.

---

3. ToastContainer 설정으로 문제 완화

react-toastify에서 ToastContainer의 설정을 통해 중복 토스트 메시지를 방지할 수도 있습니다. 예를 들어, preventDuplicates 옵션을 사용하는 방식입니다.

import { ToastContainer, toast } from 'react-toastify';

function ExampleComponent() {
  useEffect(() => {
    toast('Hello, World!');
  }, []);

  return (
    <div>
      Example Component
      <ToastContainer preventDuplicates />
    </div>
  );
}

 

이 방법은 동일한 메시지가 중복 출력되는 것을 방지합니다.

---

결론!

React Strict Mode는 개발 단계에서 더 안전한 애플리케이션을 작성하도록 돕지만, 예기치 않은 동작을 초래할 수 있기에 이를 해결하기 위해 아래 방법을 고려할 수 있습니다:

1. Strict Mode 비활성화
2. 상태 플래그(useRef)를 사용해 첫 번째 호출을 무시
3. react-toastify의 preventDuplicates 옵션 활용

해결