상세 컨텐츠

본문 제목

export default

Next.js

by 폴리프레임 2024. 4. 28. 16:32

본문

반응형

컴포넌트가 default export 로 했는지, named export 로 했느지에 따라서 import 하는 방식은 달라집니다.
file: ../screens/Wheel.js

import React from 'react';
import { View, Text } from 'react-native';

const Wheel = () => {
  return (
    <View>
      <Text>Wheel Screen</Text>
    </View>
  );
};

export default Wheel;

위의 경우는 default export 의 경우입니다. 따라서 다음처럼 import 합니다.

import Wheel from "../screens/Wheel";

Default export된 모듈은 중괄호 {} 없이 import 해야 합니다.

 

만약 screens 폴더의 index.js 파일에서 여러 컴포넌트를 함께 export 하고 있다면, 각 컴포넌트를 named export로 처리하거나, default export를 사용하여 개별적으로 가져와야 합니다.

예를 들어 screens/index.js에서 다음과 같이 여러 컴포넌트를 export 할 수 있습니다:
file: ../screens/index.js

import Home from "./Home";
import GenderPay from "./GenderPay";
import Profile from "./Profile";
import Calculator from "./Calculator";
import Wheel from "./Wheel";

export {
    Home,
    GenderPay,
    Profile,
    Calculator,
    Wheel,
}

이런 식으로 named export로 처리한 경우에는 import { GenderPay, Profile, Calculator, Wheel } from "../screens"; 형태로 가져올 수 있습니다.

관련글 더보기