Import & Export

1. Import

export로 내보낸 파일, 설정, 컴포넌트를 외부 파일이나 모듈에서 가져올 떄 사용한다.

import 이름 from 위치

import { 이름 } from 위치

import * from 위치

import * as 이름 from 위치
import { default as 이름 } from 위치

2. Export

변수, 함수, 클래스 앞에 export를 붙여 외부에서 사용할 수 있도록 내보낸다.

export { 객체 }
import { 객체 } from 위치

export default 객체
import { default as 객체 } from 위치
import 객체 from 위치

아래와 같이 선언문과 함께 쓸 수 있다.

export const 컴포넌트 = () => { return <></> }
export default class 컴포넌트 extends React.Component {}

export const 함수 = () => {}
export default function 함수 () {}

3. 위치 표현

export, import를 사용시 from과 함께 위치를 표현한다.
예시는 아래와 같다.

import { 객체 } from './components/index'
import { 객체 } from './components'

pages/Home/index.js

import React from 'react'

export const Home = () => {
	return (
		<div></div>
	)
}

pages/index.js

export { Home } from './Home'

routes/App.js

import { Home } from '../pages'