[Javascript] export vs export defaul

export vs export default

export와 export default 모두 공통적으로

한 파일에 있는 변수, 함수를 다른 파일에서 가져다 쓰기 위해 "내보내기"를 해 준다.

 

export

한 파일에서 여러번 사용해서 여러 개를 내보낼 수 있다.

export const todo = '할일';

export const finished = '끝';

export function TodoList () {

  return todo;

};

 

 

export default

한 파일에서 한 번만 사용하고 한 개만 내보낼 수 있다.

export default function TodoList () {

  return todo;

}

export const todo = '할일';

export const finished = '끝';

export default const finished = '끝'; // 에러

 

import (export)

변수/함수명 변경이 불가능

{} 안에 변수/함수명을 적는다.

같은 파일에 있는 변수/함수를 가져오는 경우 쉼표(,)로 구분해서 가져올 수 있다.

import { todo, finished } from '경로';

(변수명 변경도 가능. import { todo as changedTodo}라고 적으면 됨)

 

 

import (export default)

변수/함수명 변경 가능

{} 없이 적는다.

import TodoListChangeName from "경로";

 

객체로 한꺼번에 가져오기

한 파일안에 있는 export, export default를 묶어서 한 객체로 가져온다.

가져올 파일들

export default 'abc'

export const todo = '할일';

export const finished = '끝';

가져올 때

import * as todoObj from "경로";

결과

todoObj { toco : '할일', finished: '끝', default : 'abc'