import & export

📌 import

파일, 설정, 컴포넌트를 외부 파일이나 모듈에서 가져올 때 사용한다.

import 이름 from 위치

• 가져오는 것이 json 형태인지, default가 붙었는지 등에 따라 아래와 같은 형태로도 쓰인다.

import {이름} from 위치

• 해당 위치에 있는 모든 것을 갖고 올 수 있다는 의미로 * 를 붙여서 사용하기도 한다.

import * from 위치

• as 문법을 통해 이름을 임의로 설정 할 수 있다.

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

📌 export

객체나 함수를 모듈화 시켜 내보낼 때 사용한다.

• 객체의 이름을 유지한 채 내보낸다.

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

• 객체의 이름을 임의로 설정할 수 있다.

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

• export는 아래와 같이 선언문과 한 번에 쓸 수 있다.

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

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

• export에 from을 붙이면, 특정 위치에서 가져온 파일을 내보낼 수 있다.

export {객체} from 위치

• 폴더를 대상으로한 import/export 시 index.js를 기본으로 가져온다.

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'