[리액트] import에서 {}를 쓰는 것과 안 쓰는것의 차이

*{}를 쓰면 : named export를 가져오는 것

*{}없이 쓰면 : default export를 가져오는 것

 

*default export 예시

//default export

//내보낼때 (export)
const MyComponent = () => {
  return <div>안녕하세요!</div>;
};

export default MyComponent;

//가져올때 (import)
import MyComponent from './MyComponent'; 
//import 명 자유롭게 바꿀 수 있음

 

*named export 예시

//named export

//내보낼때 (export)
export const add = (a: number, b: number) => a + b;
export const subtract = (a: number, b: number) => a - b;

//가져올때 (import)
import { add, subtract } from './utils';

//import 명 변경 불가. 여러개 export 가능.

 

**쉽게 외우기

-{} 있으면 여러개중 하나 고르기

-{} 없으면 그 파일의 주인공 가져오기

 

 

**default export 와 named export 둘을 섞어 사용하는 이유

-default export는 해당 파일의 주인공을 명확하게 표현할 때 사용.

-named export는 보조 기능 여러개 제공할 때 사용.

 

// UserCard.tsx
const UserCard = () => { ... };
export default UserCard; //주인공

export const getUserAge = (user) => { ... };
export type UserProps = { name: string; age: number };


//index.tsx
import UserCard, { getUserAge, UserProps } from './UserCard';