코드 오류를 사전에 차단하는 React Strict 모드 이해하기

JavaScript에는 'use strict' 구문을 사용하여 코드를 보다 엄격하게 검사할 수 있는 "엄격 모드"가 있습니다. 마찬가지로, React에는 잠재적 문제를 식별하는 데 도움을 주는 React Strict 모드가 있는데요. Next.js와 같은 프레임워크에서도 설정 파일을 통해 이 모드를 활성화할 수 있으며, 사용을 강력히 권장하고 있습니다.

React Strict 모드란 무엇일까요?

• 추가적인 렌더링을 실행하여 렌더링 관련 버그를 식별합니다.

• useEffect를 두 번 실행하여 클린업 함수 누락과 같은 버그를 찾아냅니다.

• 사용되지 않는(deprecated) API의 사용을 감지합니다.
  

React는함수형 프로그래밍 패러다임을 활용하여 컴포넌트를 구성하기 때문에 순수 함수처럼 동작하기를 기대합니다. 즉, 동일한 입력(props, state)에 대해 항상 동일한 JSX를 반환해야 하는데요. 이 규칙을 위반하면 예상치 못한 동작과 버그가 발생할 수 있습니다. Strict 모드는 이러한 순수하지 않은 코드를 식별하기 위해 일부 함수를 두 번 호출합니다. 함수가 순수하다면 두 번 호출하더라도 렌더링 결과는 동일하기 때문인데요. 이중 호출 대상에는 다음이 포함됩니다:

• 컴포넌트 함수 본문(함수 컴포넌트 전체)

• useState, setFunctions(setState 함수), useMemo
  

이중 호출은 사이드 이펙트를 포함할 수 있는 코드가 순수 함수의 기대를 충족하는지 확인하기 위해 수행됩니다. Strict 모드가 아닌 경우, 추가적인 렌더링이 발생할 때까지 버그를 간과하기 쉽습니다.

개발 모드에서 이러한 두 번째 렌더링을 비활성화하고 싶다면, React DevTools 확장 프로그램에는 이를 억제할 수 있는 설정이 포함되어 있습니다. 이를 통해 개발자는 필요에 따라 Strict 모드의 이중 렌더링을 조절할 수 있습니다.

https://react.dev/reference/react/StrictMode