React Native에서 `import` 구문 : `{}` 사용법

SungminStar·2024년 8월 23일

[React Native]

목록 보기

1/2

ERROR Warning: 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 imports.

오타때문인줄 알았으나
import 구문에서 {} 사용법 때문이엇슴
{}를 써서 문제가 됐다. 몇 번 그런적이 있었으나,, 그때 그냥 해결되면 넘어갔다.
너무 자주 만나는 문제 같아서 이젠 정리해보련다..
{}를 써야 하는 경우, 안 써야 하는 경우, 섞인 경우,,,🤯

1. 기본 내보내기 (`default export`)

기본 내보내기는 모듈에서 단 하나의 값이나 객체를 기본으로 내보내는 방식
모듈을 사용하는 개발자가 해당 모듈에서 내보내는 주된 기능이나 객체를 쉽게 가져올 수 있도록 설계
모듈 내에서 export default로 내보내면, 다른 파일에서 이 모듈을 가져올 때 {} 없이 사용
- why? 이름 그대로 해당 모듈에서 하나의 주요한 값을 내보내는 것이므로

예시

// BasicHeader.js
const BasicHeader = () => {
// 컴포넌트 코드
};
export default BasicHeader;

위 코드에서 BasicHeader는 기본 내보내기로 설정
이를 가져올 때는 {} 없이 작성
- 예시
```
import BasicHeader from './BasicHeader';
```
목적 : 이 모듈을 사용하는 개발자가 해당 모듈에서 제공하는 핵심 기능을 직관적으로 사용할 수 있도록
장점 : 모듈에서 하나의 주요 기능이나 객체를 내보내는 것을 간단하게 만듦

2. 명명된 내보내기 (`named export`)

명명된 내보내기는 모듈에서 여러 값이나 함수를 내보낼 수 있는 방식
이 모듈에서 여러 개의 기능을 제공할 때 유용하며, 개발자가 필요한 기능만 선택적으로 가져올 수 있도록 설계
이때는 각 값을 export 키워드를 사용해 내보내며, 가져올 때는 해당 이름을 {}로 감싸서 사용

예시

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

위 코드에서 add 와 subtract는 명명된 내보내기로 설정
이를 가져올 때는 {}를 사용하여 작성
- 예시
```
import { add, subtract } from './utils';
```
목적 : 모듈에서 여러 개의 유틸리티 함수나 객체 등을 제공할 때 유용, 필요한 함수나 객체만 선택적으로 가져와서 사용
장점 : 여러 개의 기능이나 객체를 내보내어 모듈 사용의 유연성 제공

3. 혼합 내보내기

한 모듈에서 기본 내보내기와 명명된 내보내기를 동시에 사용할 수도 있음
Javascript의 모듈 시스템에서 기본 내보내기 (default export) 와 명명된 내보내기(named export)를 동시에 사용하여 모듈을 더 유연하게 사용하고, 다양한 사용 사례에 대응하기 위해서 사용
이 경우, 각각의 값을 적절히 가져올 것!

예시

// math.js
const defaultFunction = () => {/* 기본 함수 */};
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default defaultFunction;

이 경우, 기본 내보내기와 명명된 내보내기를 동시에 가져오려면 다음과 같이 작성
- 예시
```
import defaultFunction, { add, subtract } from './math';
```
목적 ?
- 하나의 모듈에서 주된 기능과 부가적인 기능을 동시에 제공하고 싶기 때문
- 모듈을 사용하는 측에서는 이 모듈의 기본 기능을 사용하면서도, 필요에 따라 추가적인 기능들 가져올 수 있음
- 모듈을 설계할 때 유연성을 제공
  - 사용자가 이 모듈을 어떻게 사용할지 예측할 수 없기 때문에, 주된 기능은 default export로, 부가적인 유틸리티는 named export로 내보내어 여러 가지 사용 시나리오 대응 가능