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

도입

React 개발 중 Error: Element type is invalid 에러를 만나면 당황스러울 수 있습니다. 이 에러는 “Expected a string (for built-in components) or a class/function (for composite components) but got: undefined”라는 메시지와 함께 나타나며, 컴포넌트를 제대로 렌더링하지 못할 때 발생합니다. Error: Element type is invalid는 주로 컴포넌트 import/export 문제, 잘못된 JSX 사용, 또는 컴포넌트 정의 오류에서 비롯됩니다. 이 글에서는 에러의 근본 원인부터 실전 해결법, 그리고 예방 방법까지 체계적으로 다루어 여러분이 빠르게 문제를 해결할 수 있도록 돕겠습니다.

에러 상세 분석

Error: Element type is invalid는 React가 컴포넌트를 렌더링하려고 할 때, 유효하지 않은 타입을 받았을 때 발생하는 런타임 에러입니다. React는 컴포넌트로 문자열(HTML 태그명), 함수형 컴포넌트, 또는 클래스형 컴포넌트를 기대하지만, undefined, null, 또는 잘못된 객체를 받으면 이 에러를 던집니다.

전체 에러 메시지는 다음과 같습니다:

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.

이 에러는 개발 환경에서는 즉시 감지되지만, 프로덕션 빌드에서는 앱이 완전히 크래시될 수 있어 특히 주의가 필요합니다. 에러 스택 트레이스를 확인하면 어떤 컴포넌트에서 문제가 발생했는지 파악할 수 있으며, 대부분 import 문이나 컴포넌트 사용 부분에서 원인을 찾을 수 있습니다.

발생 원인 5가지

1. Named Export와 Default Export 혼동

가장 흔한 원인입니다. 컴포넌트를 named export로 내보냈는데 default import로 가져오거나, 그 반대의 경우 undefined가 됩니다.

// Button.js - named export
export const Button = () => Click;

// App.js - 잘못된 import (default로 가져옴)
import Button from './Button'; // undefined!

2. 컴포넌트를 export하지 않음

컴포넌트 파일에서 export 키워드를 빼먹은 경우입니다.

// Header.js
const Header = () => 
Header
;
// export를 잊어버림!

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

3. 순환 의존성 (Circular Dependency)

두 개 이상의 모듈이 서로를 import할 때 발생합니다. 모듈 로딩 순서에 따라 일부 컴포넌트가 undefined 상태로 참조될 수 있습니다.

4. 잘못된 JSX 문법

컴포넌트를 JSX로 사용하지 않고 변수처럼 사용하거나, 소문자로 시작하는 컴포넌트명을 사용한 경우입니다.

// 잘못된 사용
const myComponent = () => 
Hello
;
return ; // 소문자 시작은 HTML 태그로 인식

5. 동적 Import 타이밍 문제

React.lazy()나 동적 import를 잘못 사용하여 컴포넌트가 로드되기 전에 렌더링을 시도하는 경우입니다.

해결방법 7가지 (코드 포함)

해결법 1: Import/Export 방식 일치시키기

Named export는 중괄호와 함께, default export는 중괄호 없이 import합니다.

// 올바른 named export/import
// Button.js
export const Button = () => Click;

// App.js
import { Button } from './Button';

// 올바른 default export/import
// Card.js
const Card = () => 
Card
;
export default Card;

// App.js
import Card from './Card';

해결법 2: Export 확인 및 추가

// 수정 전
const MyComponent = () => 
Content
;

// 수정 후 - named export
export const MyComponent = () => 
Content
;

// 또는 default export
const MyComponent = () => 
Content
;
export default MyComponent;

해결법 3: 컴포넌트명 대문자로 시작

// 잘못된 방식
const header = () => 
Title
;
return 
; // HTML header 태그로 인식됨

// 올바른 방식
const Header = () => 
Title
;
return 
;

해결법 4: Console.log로 Import 확인

import { MyComponent } from './MyComponent';
console.log(MyComponent); // undefined인지 확인

// undefined가 출력되면 export/import 방식 재확인

해결법 5: 순환 의존성 제거

// 잘못된 구조
// A.js
import B from './B';
export const A = () => ;

// B.js
import { A } from './A';
export default () => ;

// 올바른 구조 - 공통 컴포넌트 분리
// Common.js
export const SharedComponent = () => 
Shared
;

// A.js
import { SharedComponent } from './Common';

// B.js
import { SharedComponent } from './Common';

// 올바른 동적 import
import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    Loading...