React에서 Error: Element type is invalid 에러 완벽 해결 가이드

React 개발을 하다 보면 갑자기 Error: Element type is invalid 에러 메시지와 함께 애플리케이션이 멈춰버리는 경험을 하게 됩니다. 이 에러는 특히 초보 개발자들이 자주 마주치는 문제이지만, 에러 메시지만으로는 정확한 원인을 파악하기 어렵습니다. Error: Element type is invalid는 React가 렌더링하려는 컴포넌트의 타입이 올바르지 않을 때 발생하며, 주로 import/export 문제, 잘못된 컴포넌트 참조, 또는 타입 불일치에서 기인합니다. 이 글에서는 이 에러의 발생 원인부터 구체적인 해결 방법, 그리고 예방 전략까지 실무에서 바로 적용할 수 있는 완벽한 가이드를 제공합니다.

Error: Element type is invalid 에러 상세 분석

이 에러의 전체 메시지는 보통 다음과 같은 형태로 나타납니다:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named exports.

React는 컴포넌트를 렌더링할 때 유효한 React 엘리먼트 타입을 기대합니다. 유효한 타입은 다음과 같습니다:

• 문자열: HTML 태그명 (예: ‘div’, ‘span’, ‘button’)
• 함수: 함수형 컴포넌트
• 클래스: 클래스형 컴포넌트
• React Fragment: React.Fragment 또는 <>

하지만 undefined, null, 또는 잘못된 객체가 전달되면 React는 이를 렌더링할 수 없어 Error: Element type is invalid를 발생시킵니다. 이 에러는 빌드 시점이 아닌 런타임에 발생하므로, 코드가 실행되는 순간에만 문제를 발견할 수 있습니다.

Error: Element type is invalid 발생 원인 5가지

1. Default Export와 Named Export 혼동

가장 흔한 원인으로, export 방식과 import 방식이 일치하지 않을 때 발생합니다. Default export로 내보낸 컴포넌트를 named import로 가져오거나, 그 반대의 경우 컴포넌트가 undefined가 됩니다.

// Button.js - default export
export default function Button() {
  return 클릭;
}

// App.js - 잘못된 named import
import { Button } from './Button'; // undefined! 에러 발생

2. 컴포넌트 Export 누락

컴포넌트를 정의했지만 export를 잊어버린 경우입니다. 특히 여러 컴포넌트를 한 파일에서 작업할 때 자주 발생합니다.

// Header.js
function Header() {
  return 
헤더
;
}
// export 누락!

// App.js
import Header from './Header'; // undefined

3. 컴포넌트 대신 모듈 객체 렌더링

전체 모듈을 import하고 컴포넌트를 추출하지 않은 채 렌더링하려 할 때 발생합니다.

import * as Components from './Components';

// 잘못된 사용
 // 에러!

// 올바른 사용

4. 순환 참조(Circular Dependency)

두 개 이상의 파일이 서로를 import할 때 발생하며, 모듈이 완전히 로드되기 전에 사용되어 undefined가 됩니다.

5. 타이포(오타) 또는 잘못된 경로

import 경로가 잘못되었거나 컴포넌트 이름에 오타가 있으면 존재하지 않는 컴포넌트를 참조하게 되어 undefined가 반환됩니다.

Error: Element type is invalid 해결방법 7가지

해결법 1: Export/Import 방식 확인 및 수정

가장 먼저 확인해야 할 사항입니다. export 방식에 맞게 import 구문을 수정하세요.

// 올바른 default export/import
// Component.js
export default function Component() {
  return 
컴포넌트
;
}

// App.js
import Component from './Component'; // 중괄호 없음

// 올바른 named export/import
// Utils.js
export function HelperComponent() {
  return 
헬퍼
;
}

// App.js
import { HelperComponent } from './Utils'; // 중괄호 사용

해결법 2: Export 구문 추가

컴포넌트 정의 후 export를 잊지 않았는지 확인하고 추가하세요.

// 방법 1: 선언과 동시에 export
export default function MyComponent() {
  return 
내 컴포넌트
;
}

// 방법 2: 나중에 export
function MyComponent() {
  return 
내 컴포넌트
;
}
export default MyComponent;

// 방법 3: Named export
export function MyComponent() {
  return 
내 컴포넌트
;
}

해결법 3: 브라우저 콘솔에서 Import 확인

개발자 도구에서 실제로 무엇이 import 되는지 확인하세요.

import MyComponent from './MyComponent';

console.log(MyComponent); // undefined인지 확인
console.log(typeof MyComponent); // 'function' 또는 'object'여야 함

function App() {
  return ;
}

해결법 4: 동적 Import 사용 시 올바른 처리

React.lazy나 동적 import를 사용할 때는 올바른 패턴을 따라야 합니다.

// 올바른 React.lazy 사용
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    로딩중...