Import & Export

React에서 다른 폴더에 있는 파일을 불러올 수 있다

우리가 만드는 HTML, CSS, JAVASCRIPT 소스코드들을 전부 한 파일에 저장하면 너무 복잡해 지기 때문에 각각의 파일을 따로 만들어 필요에 따라 불러와서 사용하기 위해 import와 export를 하게 된다

---

export

변수, 함수, 객체 등 다른 파일에서 사용할 수 있도록 내보낼때 사용한다

export const hello = "hi"
export const fruit = ["apple", "banana"]

만약 내보내는게 많을시 이렇게도 사용이 가능하다

const hi = "hello"
const fruit = ["apple", "banana"]

export {hi, fruit}

---

import

export로 내보내진 것들을 가져와 사용한다

import {hi} from "디렉토리 위치"
import {fruit} from "디렉토리 위치"

---

export default

특정 하나만 내보낸다

const hi = "hello"
export default hi

import hi from "디렉토리 위치" // default한 것을 가져올땐 {} 사용 하지 않는다

import greeting from "디렉토리 위치" // 가져올때 이름을 변경할수도 있다

import hi, {fruit} from "디렉토리 위치" // 두개 동시에 가져올 수 있다

const hi = "hello"
const fruit = ["apple", "banana"]
export default hi
export default fruit // default는 한개만 가능하기 때문에 에러 발생!!

---

Emotion 한번에 가져와서 사용하기

import * as QQQ from "styles 위치"

QQQ.BlueButton
QQQ.RedInput

이렇게 사용