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는 React 개발자라면 누구나 한 번쯤 겪게 되는 흔한 에러 중 하나입니다. 이 에러는 주로 컴포넌트를 잘못 import하거나 export할 때 발생하며, 초보 개발자뿐만 아니라 숙련된 개발자도 실수로 마주치게 됩니다. 이 글에서는 이 에러의 근본 원인부터 실전 해결 방법, 그리고 예방 전략까지 모든 것을 상세히 다루어 여러분이 빠르게 문제를 해결할 수 있도록 돕겠습니다.

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.

에러 메시지 자체가 친절하게 힌트를 제공하고 있습니다. 주로 컴포넌트를 export하지 않았거나, default export와 named export를 혼동했을 가능성이 높습니다. 이 에러는 개발 환경에서는 명확하게 표시되지만, 프로덕션에서는 앱 전체가 크래시될 수 있어 주의가 필요합니다.

발생 원인 5가지

1. Default Export와 Named Export 혼동

가장 흔한 원인입니다. 컴포넌트를 export할 때 사용한 방식과 import할 때 사용한 방식이 일치하지 않으면 Error: Element type is invalid가 발생합니다.

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

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

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

컴포넌트를 정의했지만 export 키워드를 빼먹는 경우입니다.

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

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

3. 순환 종속성(Circular Dependency)

두 개 이상의 파일이 서로를 import하는 경우 컴포넌트가 제대로 로드되지 않을 수 있습니다.

4. 잘못된 경로 또는 파일명

파일 경로가 잘못되었거나 파일명이 일치하지 않으면 모듈을 찾지 못해 undefined가 반환됩니다.

5. React 컴포넌트가 아닌 값을 렌더링

일반 객체나 배열을 컴포넌트처럼 사용하려 할 때 발생합니다.

const config = { title: 'Hello' };
// 잘못된 사용
 // 에러 발생!

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

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

Named export를 사용했다면 중괄호와 함께 import하고, default export를 사용했다면 중괄호 없이 import하세요.

// 올바른 named export/import
// Component.js
export const MyComponent = () => 
Hello
;

// App.js
import { MyComponent } from './Component';

// 올바른 default export/import
// Component.js
const MyComponent = () => 
Hello
;
export default MyComponent;

// App.js
import MyComponent from './Component';

해결법 2: Export 키워드 확인

컴포넌트 정의에 export 키워드가 있는지 확인하세요.

// 수정 전
const Header = () => 
Header
;

// 수정 후
export const Header = () => 
Header
;

해결법 3: Console.log로 디버깅

import한 컴포넌트가 실제로 무엇인지 확인하세요.

import { MyComponent } from './Component';
console.log(MyComponent); // undefined면 export/import 문제

function App() {
  return ;
}

해결법 4: Index.js를 통한 Re-export 정리

여러 컴포넌트를 관리할 때 index.js를 활용하면 실수를 줄일 수 있습니다.

// components/index.js
export { Button } from './Button';
export { Card } from './Card';
export { Header } from './Header';

// App.js
import { Button, Card, Header } from './components';

해결법 5: 동적 Import 사용 시 주의

React.lazy를 사용할 때는 반드시 default export를 사용해야 합니다.

// LazyComponent.js
const LazyComponent = () => 
Lazy
;
export default LazyComponent; // default export 필수

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

function App() {
  return (
    Loading...