[React] 엄격 모드(StrictMode)를 사용하는 이유 with 순수 함수

 

오늘은 감히 리액트월드에서 가장 중요한 개념 중 하나라고 할 수 있는

'순수 함수'를 엄격모드(StrictMode)와 함께 설명해보고자 합니다!

 

 

 

 

✅ 엄격 모드 (StrictMode)

 

 

<StrictMode> – React

(공식 문서)

 

 

 

StrictMode는 쉽게 이야기 하자면 아래와 같습니다.

"리액트가 요구하는 바와 다르게 엉망으로 프로그래밍을 한다??? 그럼 지적할거야!!"

 

위와 같이 StrictMode를 켜게 되면 리액트는 코드들을 검사하게되고, 검사를 했는데 문제가 있다고 판단되는 부분을 지적해줍니다. 그럼 StrictMode를 켜면 이 리액트는 어떤 부분을 검사할까요??

 

 

🔸 StrictMode에서 검사하는 항목

 

1. 불순한 렌더링 감지

- React 구성 요소가 순수하지 않을 경우 이를 감지합니다. (중요!!!!)
- 즉, 함수형 컴포넌트, useState와 같은 React Hook에서 사용되는 함수, 그리고 클래스 컴포넌트등을 두 번 실행하여 순수하지 않은 동작을 찾아냅니다.

 

 

2. Effect 정리 로직 누락 감지

- useEffect에서 정리(cleanup) 로직이 없거나 잘못된 경우를 찾아냅니다.
- 개발 중 모든 Effect에 대해 추가적인 "설정(setup) → 정리(cleanup) → 설정(setup)" 사이클을 실행합니다.

 

이게 무슨 말 이냐면..!

useEffect는 일반적으로 다음 순서로 실행이 됩니다.

1. 설정(setup): 컴포넌트가 렌더링되거나 업데이트되면 useEffect의 콜백 함수가 실행.
2. 정리(cleanup): 컴포넌트가 언마운트되거나, useEffect의 종속성이 변경되기 전에 정리 함수가 실행.
3. 다시 설정(setup): 종속성이 변경되면 새로운 설정을 실행합니다.

그런데 StrictMode가 활성화되면 useEffect는 추가적인 설정 → 정리 → 설정 주기를 거치게됩니다. 즉, React는 의도적으로 useEffect를 두 번 실행하는 것 이죠.

 

이렇게 두 번 실행했을 때 정리(cleanup)가 제대로 동작하지 않는다면 오류로 간주하는 것 입니다. 

 

 

3. Ref 콜백 정리 로직 누락 감지

- 콜백 ref에서 정리(cleanup) 로직이 누락되었거나 잘못된 경우를 감지합니다.
- 참조(ref) 콜백에 대해 추가 설정 및 정리 주기를 실행하여 메모리 누수 및 비정상적인 동작을 찾아냅니다.

 

이 경우도 2번과 비슷한 방법으로 정리 로직을 감지하는 것 이죠!

 

 

4. 더 이상 사용되지 않는 API 감지

- React에서 사용 중단된 API(예: componentWillMount, componentWillReceiveProps 등)를 사용하는 경우 경고합니다.

 

 

StrictMode에서 검사하는 항목은 이와 등등이 있습니다.

 

 

 

 

 

✅ 순수 함수(Pure Function)란 무엇인가?

StrictMode를 이해하기 위해선 순수 함수(Pure Function)라는 개념을 먼저 이해하는 것이 중요합니다.

 

✅ 순수 함수란?

• 같은 입력(Input)이 주어지면 항상 같은 출력(Output)을 반환하는 함수입니다.
• 외부 상태나 값을 변경하지 않는 함수입니다.
• 즉, 입력에 의해서만 결과가 결정되고, 실행 중 어떤 부작용도 일으키지 않는 함수입니다.

⚠️ 순수하지 않은 함수란?

• 함수 외부의 값을 직접 변경하거나 의존하는 경우, 즉 외부 상태를 수정하거나 변경하는 함수는 순수하지 않습니다.
• 호출할 때마다 결과가 달라지는 경우도 순수하지 않습니다.

예시:

// 순수 함수
function add(a, b) {
  return a + b; // 입력만 가지고 결과를 계산
}

// 순수하지 않은 함수
let total = 0; // 외부 상태
function addToTotal(value) {
  total += value; // 외부 상태(total)를 변경
  return total;
}

React는 순수 함수처럼 동작하는 것을 가정합니다. React 구성 요소와 useEffect는 반드시 입력(Props와 State)에 따라 동일한 결과를 반환해야 합니다.

---

✅  순수 함수와 StrictMode의 관계

React의 구성 요소는 기본적으로 순수 함수여야 합니다. 하지만, 개발자가 실수로 순수하지 않은 코드를 작성하는 경우, 이를 방지하기 위해 StrictMode가 도움을 줍니다.

 

그럼 어떻게 StrictMode가 순수함수인지를 검증하는걸까요??

 

두 번 렌더링

StrictMode는 컴포넌트를 렌더링할 때, 초기 렌더링을 일부러 두 번 실행합니다.

이 과정에서 입력과 출력이 일관되지 않은 코드를 쉽게 발견할 수 있습니다!

입출력이 일관되지 않은 코드는 두 번의 실행시 결과가 다른 값이 두 개 나올 것 이기 때문이죠!

 

순수하지 않은 코드 예시

function StoryTray({ stories }) {
  // 직접 배열을 수정함 (순수하지 않음)
  stories.push({ id: 'new', label: 'New Story' });
  
  return (
    <ul>
      {stories.map((story) => (
        <li key={story.id}>{story.label}</li>
      ))}
    </ul>
  );
}

 

문제점

• stories 배열을 직접 수정하여 상태를 변형합니다.
• 두 번 렌더링하면, 동일한 배열에 계속 항목이 추가되어, 중복된 결과가 발생합니다.

 

수정된 코드

function StoryTray({ stories }) {
  // 배열을 복사하여 새로운 배열을 생성 (순수한 방식)
  const updatedStories = [...stories, { id: 'new', label: 'New Story' }];

  return (
    <ul>
      {updatedStories.map((story) => (
        <li key={story.id}>{story.label}</li>
      ))}
    </ul>
  );
}

수정 후

• stories 배열을 복사한 후 수정하므로, 원본 데이터는 변경되지 않습니다.
• StrictMode에서도 동일한 결과를 보장합니다.

 

---

 

 

✅ 결론

StrictMode는 순수 함수의 원칙을 지키지 않는 코드를 감지하여, React 구성 요소와 Hooks의 안전성을 높이는 역할을 합니다. 이를 통해

• 불필요한 버그를 예방할 수 있습니다.
• 더 읽기 쉽고 예측 가능한 코드를 작성할 수 있습니다.

React에서 StrictMode와 순수 함수는 떼려야 뗄 수 없는 관계입니다! 아직도 StrictMode로 인하여 두 번 렌더링 되는 화면을 보고 StrictMode를 꺼버려야겠다고 생각하시는 분은 안 계시겠죠???!! 그건 우리가 코드를 고쳐야 할 필요성을 보여주는 지표이기 때문에 StrictMode를 켜두고 클린하게 코드를 작성하는 습관을 들여봐요 우리!

 

 

 

 

 

 

 

썸네일