Default Export / Named Export

녜정·2024년 1월 27일
0

Javascript

목록 보기
3/3
post-custom-banner

개발을 쉬었다보니, named export와 default default export 가 가물가물하여 기록해봅니다 허허..

Defatult Export

import 할 때 아무 이름을 붙이던 상관없습니다. 왜냐면 하나의 파일에서 하나의 모듈만 default export 할 수 있기때문 !

import GetUser from '.../file/name'

// OR
import UserService from '.../file/name'

export default 선언은 ⬇️

const GetUser = () => {
	...
}
 
export default GetUser

제가 주로 애용하는 방법은 export default이지만, 여러개를 선언해서 불러와서 사용하는 방법입니다.

export default {
  getUser: () => { ... },
  getUser2: () => { ... }
}
  
  
import GetUser from '.../file/name'
                  
const { GetUser1, Getuser2 } = GetUser;
// OR
router.get("/", GetUser.GestUser1);
                  

Named Export

import 시 대괄호 안에 export된 이름과 동일하게 설정해애한다. 다른 이름으로 사용하고싶다면 as 를 사용해서 이름을 다시 지정해줍니다.

import { GetUser1, GetUser2 } from '.../file/name'


import { GetUser1 AS RealGetUser , GetUser2 } from '.../file/name'

import * as User from '.../file/name'

한 파일 내에 여러 변수 / 클래스 export 가능하다

export const GetUser1 = () => { ... }

export const GetUser2 = () => { ... }


성능

퍼포먼스 차이는 없는 것으로 보인다.
상황에 맞춰서 사용하면 될 것 같다 !

profile
안녕하세요, 4년차 백엔드 개발자입니다. 소통하는 것을 좋아하고, velog에는 주로 짧은 글을 작성합니다.
post-custom-banner

0개의 댓글