[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트

엄격 모드의 기능

---

CRA로 생성한 React 프로젝트에선 엄격 모드(Strict Mode)가 기본적으로 적용돼 있다. 엄격 모드는 어플리케이션의 잠재적인 문제를 알아내기 위해 리액트에서 제공하는 도구다. 개발 모드에서 함수 컴포넌트 렌더링 / API 호출 등이 중복해서 발생한다면 엄격 모드 때문에 그럴 가능성이 높다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./pages/App";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement,
);

root.render(<React.StrictMode>{/* ... */}</React.StrictMode>);

 

엄격 모드는 아래 기능을 제공한다. 엄격 모드는 개발 환경에서만 적용되며 UI에 영향을 주지 않는다(렌더링 X).

 

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

 

함수 컴포넌트 바디, 상태 업데이트 함수, useState, useMemo, useReducer 인자에 넘김 함수 등을 2번씩 호출하는 것도 엄격 모드의 기능중 하나다. 사이드 이펙트를 찾을 수 있도록 의도적으로 2번씩 호출하는 것.

 

🔍️ 엄격모드가 의도적으로 중복 호출하는 함수 목록

• 클래스 컴포넌트의 constructor, render, shouldComponentUpdate 메서드
• 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
• 함수 컴포넌트 바디
• State updater 함수 (setState의 첫 번째 인자)
• useState, useMemo, useReducer에 전달되는 함수

 

처음엔 사이드 이펙트를 찾기 위해 왜 2번씩 호출해야 하는지 의아했다. 오히려 로그가 더 복잡해져서 불편했다. 하지만 이 엄격 모드 덕분에 생각지 못한 문제를 발견한 뒤론 되려 유용하다고 생각한다. 잘 짜인 어플리케이션이라면 동일한 작업을 중복 수행하더라도 사이드 이펙트가 없어야 한다.

 

사이트 이펙트 사례

---

아래 글쓰기 기능을 담당하는 Compose.tsx 컴포넌트가 있다. 완료 버튼을 눌러 작성한 글을 제출하거나, 다른 페이지로 이동하면 Compose 컴포넌트는 언마운트돼야 한다. 컴포넌트를 언마운트할 때 입력창에 남아있는 텍스트를 모두 삭제하고(clearDraft) 리스트 화면으로 이동하는 작업을 수행하는 leavePage 함수를 호출한다.

// Compose.tsx
const leavePage = useCallback(() => {
  dispatch(clearDraft()); // 입력창에 남아있는 텍스트 삭제
  navigate(siteUrl.community.list, { replace: true }); // 리스트 페이지로 이동
}, [dispatch, navigate]);

const submitHandler = useCallback(async () => {
  try {
    await dispatch(submitDraft(draft)).unwrap(); // 작성한 글 제출
    leavePage(); // 글 작성을 마쳐서 언마운트하는 case
    // ...
  } catch (e) {
    // ...
  }
}, [dispatch, draft, navigate]);

useEffect(() => {
  return () => {
    leavePage(); // 뒤로가기 등 라우트 변경으로 언마운트하는 case
  };
}, [leavePage]);

 

하지만 엄격 모드에선 Compose.tsx 컴포넌트를 정상적으로 마운트 할 수 없다. useEffect를 2번 실행하기 때문이다. 2번째 이펙트를 실행하기 전 클린업 함수에 있는 leavePage를 호출해서 리스트 페이지로 이동한다. 즉, 글쓰기 페이지로 이동하자마자 리스트 페이지로 이동하는 문제가 발생한다.

 

이 문제는 입력창 텍스트 삭제(clearDraft)와 페이지 이동 기능을 leavePage 함수에 몰아넣는데서 비롯됐다. 곰곰이 생각해보면 leavePage 함수는 clearDraft 역할만 수행하면 된다. leavePage 함수를 호출하는 상황은 라우트 변경으로 컴포넌트가 언마운트하는 시점이기 때문이다. 불필요한 leavePage 함수를 아예 없애버리고 아래처럼 수정할 수 있다.

// Compose.tsx
const submitHandler = useCallback(async () => {
  try {
    await dispatch(submitDraft(draft)).unwrap(); // 작성한 글 제출
    navigate(siteUrl.community.list, { replace: true }); // 리스트 페이지로 이동
    // ...
  } catch (e) {
    // ...
  }
}, [dispatch, draft, navigate]);

useEffect(() => {
  return () => {
    dispatch(clearDraft()); // 입력창에 남아있는 텍스트 삭제
  };
}, [leavePage]);

 

엄격 모드를 통해 함수 컴포넌트를 2번씩 호출하지 않았다면 개발 환경에서 위 버그를 발견하지 못했을 것이다. 엄격 모드는 생각보다 유용하다.

 

레퍼런스

---

Strict 모드 – React

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요