[React] export와 export default

export한 컴포넌트를 import

---

컴포넌트를 낱개로 export 했을 경우 내가 원하는 요소만 골라서 import 해오는 것이 가능하다.

받아오고자 하는 컴포넌트의 이름을 {중괄호} 안에 콤마로 구분해서 나열해주면 된다.

import { MyInput } from './BoardWrite.styles.js'

 

그렇다면 해당 경로 문서의 컴포넌트를 한번에 다 받아올 수는 없을까?

물론 가능하다.

import * as S from './BoardWrite.styles.js'
// S라는 객체 안에 해당 경로의 export된 컴포넌트를 전부 넣어서 가져오는 방법.
// 쓸때에는 S.MyInput 같은 식으로 사용 가능

 

export dfault한 컴포넌트를 import

---

export default는 대상을 기본값(default)로 만들어 export 하는 것이다.

이 경우에는 중괄호를 넣을 필요가 없으며, 해당 소스코드의 default는 정해져있기 때문에 엉뚱한 문구를 입력해도 해당 컴포넌트가 import 된다. 단, 이 경우 컴포넌트의 이름이 해당 문구에 할당된다. (하단 예시 코드 참고)

export default function BoardWriteUI(){
    return(
        <div></div>
    )
}
// 이런 식으로 export default 한다.
export const a = 3;

import BoardWriteUI from './BoardWrite.presenter.js'
// 이런식은 물론이고
import ASDAEBWDEFAWDAEF from './BoardWrite.presenter.js'
// 이런식으로 보내도 불러와진다.
import BoardWriteUI, {a} from './BoardWrite.presenter.js'
// 이런 식의 혼용도 가능, a의 경우 export default가 아니기 때문에 이름을 임의로 바꾸면 안된다.
import BoardWriteUI, {a as A} from './BoardWrite.presenter.js'
// 정 바꾸고 싶으면 이런식으로 할 수 있긴 함