Internal React error: Expected static flag was missing 해결 방법

😭 에러 발생 원인

참고 : "Expected static flag was missing" 오류는 React 18에서 새롭게 도입된 정적 렌더링(Static Rendering)과 관련된 에러입니다. 이 오류는 React 18에서의 새로운 기능 중 하나인 정적 렌더링과 관련하여 발생합니다.

정적 렌더링은 서버 측에서 React 애플리케이션을 렌더링하여 초기 HTML을 생성한 후, 클라이언트 측에서 React 애플리케이션을 마운트하여 상호작용성을 제공하는 방법입니다. 이를 위해 React는 렌더링된 컴포넌트가 정적인지 동적인지 구분하기 위한 "정적 플래그(Static Flag)"라는 새로운 개념을 도입하였습니다.

"Expected static flag was missing" 오류는 이 정적 플래그가 누락되었을 때 발생합니다. 이 오류는 대개 다음과 같은 이유로 발생합니다.

1. React 버전 문제: 이 오류는 React 18에서만 지원되는 정적 렌더링 기능과 관련된 오류입니다. 따라서, React 18 이전 버전에서는 이 오류가 발생하지 않습니다.
2. 컴포넌트 문제: 이 오류는 정적 렌더링이 필요한 컴포넌트에서만 발생합니다. 따라서, 정적 렌더링이 필요하지 않은 컴포넌트에서는 이 오류가 발생하지 않습니다. 오류가 발생하는 컴포넌트를 찾아서 정적 플래그를 추가해주어야 합니다.

😇 해결 방법

해결 방법으로는, 정적 렌더링을 사용하는 컴포넌트에서는 __isStatic 플래그를 추가하여 문제를 해결할 수 있습니다. 예를 들어, 아래와 같이 정적 렌더링이 필요한 컴포넌트에서 __isStatic 플래그를 추가할 수 있습니다.

function MyComponent() {
  // ...
}

MyComponent.__isStatic = true;

이렇게 추가한 __isStatic 플래그는 React가 컴포넌트를 정적 렌더링할 때 사용됩니다. 이를 통해 "Expected static flag was missing" 오류를 해결할 수 있습니다.