Import & Export

Import

외부에서 내보낸 정보를 가져올 때 사용한다.(컴포넌트, 이미지 등)
가져올 내용에 따라(한 개만 가져올 것인가, 여러 개를 가져올 것인가, 전체를 가져올 것인가)
다음과 같이 분류된다.

문서 전체를 가져오는 경우

import * as (이 문서에서 사용할 별명) from "가져올 곳";
import * as myData from "data.js"

하나만 가져오는 경우

import {가져올 것} from "가져올 곳";
import {useState} from "react";

여러 개를 가져오는 경우

import {가져올 것1, 가져올 것2} from "가져올 곳";
import {aaa, bbb} from "origin.js"

문서 전체를 가져올 때 별명을 지었듯이 일부만 가져올 때도 별명을 지을 수 있다(이름이 너무 길 때 사용하자)

import {너무너무너무너무너무너무너무긴이름 as 짧은이름}  from "가져올 곳";
import {abcdefghijklmnopqrstu as abc} from "alphabet.js"

Export

외부에서 정보를 가져오기(import) 위해서는 먼저 내보내기를 해주어야 한다.
내보내기 할 때도 마찬가지로 내용에 따라 다음과 같이 분류된다.

이름을 가진 것(유명) 내보내기

이름을 가진 것을 내보낼 때에는 여러 개를 내보낼 때 사용한다.
하지만 내보낸 이름과 꼭 같은 이름을 사용해 받아야 한다. 바꾸고 싶다면 as를 사용하자.

하나씩 내보내는 경우

export (내보낼 정보);
export const name1 = "홍길동" ;

여러 개를 내보내는 경우
가져올 때 처럼 별명을 정해 내보낼 수 있다.(하나씩 할 때도 당연히 가능)

export { 목록1, 목록2, 목록3};
export {aaa, bbb, ccc};
export {aaaaaaaaaaaa as aaa, bbbbbbbbbb as bbb};

기본(default) 내보내기

기본 내보내기는 단일값을 보낼 때 사용한다.
받을 때 이름을 마음대로 사용할 수 있다.

export default (내보낼 것);
export default example;