React Native에서 “Element type is invalid” 오류 문제 해결

React Native 요소 유형이 잘못됨 – 문제 해결 가이드

React Native를 사용하다가 “Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined”라는 오류 메시지를 만나면, 올바른 곳에 왔습니다. 이 문제 해결 가이드에서는 이 오류의 가능한 원인을 탐구하고 해결 방법을 제공해 드리겠습니다.

문제

React Native 페이지에 모달 컴포넌트를 추가할 때 다음과 같은 오류가 발생할 수 있습니다:

'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.'

다음은 이 오류가 발생하는 코드의 예시입니다:

import Confirm from './Confirm';

// ...

render() {
  return (
    <Card>
      <EmployeeForm {...this.props} />
      <CardSection>
        <Button onPress={this.onButtonPress}>
          Save Changes
        </Button>
      </CardSection>
      <CardSection>
        <Button onPress={this.onTextPress}>
          Text Schedule
        </Button>
      </CardSection>
      <CardSection>
        <Button onPress={() => this.setState({ showModal: !this.state.showModal })}>
          Fire Employee
        </Button>
      </CardSection>
      <Confirm
        visible={this.state.showModal}
      >
        Are you sure you want to fire this employee?
      </Confirm>
    </Card>
  );
}

해결 방법

1. Confirm 컴포넌트의 내보내기 처리

자주 발생하는 문제 중 하나는 내보내기 구문이 잘못 구성되어 있는 것입니다. Confirm.js 파일에서 Confirm 컴포넌트를 올바르게 내보내는지 확인하세요.

export { Confirm };

기본 내보내기 문법을 사용하는 경우(export default Confirm;), 컴포넌트를 가져올 때 문제가 발생할 수 있습니다.

2. Confirm 컴포넌트 가져오기

EmployeeEdit.js 파일에서 Confirm 컴포넌트를 가져올 때, Confirm 주위에 중괄호를 사용하지 않도록 확인하세요:

import Confirm from './Confirm';

중괄호를 사용하는 경우(import { Confirm } from './Confirm';)는 동일한 파일에서 여러 컴포넌트를 가져올 때에만 필요합니다.

3. 대체 가져오기 구문

일부 경우에는 대체 가져오기 구문을 사용하여 문제를 해결할 수 있습니다. EmployeeEdit.js 파일에서 import 구문을 다음과 같이 업데이트하세요:

import Confirm from './Confirm';

기본 내보내기 문법을 사용하는 경우, 기본 내보낸 컴포넌트를 가져올 때 중괄호를 사용할 필요가 없습니다.

이 문제 해결 단계를 따라가면 “Element type is invalid” 오류를 해결하고 Confirm 컴포넌트를 React Native 애플리케이션에 성공적으로 추가할 수 있게 될 것입니다.

즐거운 코딩하세요!

참고 자료 : 

reactjs