컴포넌트가 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"; 형태로 가져올 수 있습니다.
useSearchParams, usePathname, useRouter - next.js (0) | 2024.05.13 |
---|---|
fonts 관리 (0) | 2024.05.13 |
Next.js 14 App Router - 2024.03.28 (1) | 2024.03.28 |
next.js <Image /> 관련하여 layout shift 란 (0) | 2023.10.31 |
NextResponse(JSON.stringify( )), NextResponse.json( ) (2) | 2023.08.14 |