[React] export default vs named export

* 아래 코드는 Next.JS 14 환경에서 테스트하였습니다.

 

React (JS ES6)에서 하나의 파일(Module)을 내보는 방식은 export default 방식과 named export 방식으로 구분된다. 

데이터를 내보내는 측에서는 export keyword를 통해 내보낼 데이터를 명시하며, 데이터를 받는 측에서는 import keyword를 사용해 받을 데이터를 정의한다. 

 

export default

export default 방식은 단 하나의 데이터만을 내보낼 수 있으며 데이터 변수명을 재정의 가능하다.

또한 export default는 모듈 당 하나만 정의할 수 있다.

 

data.js

let data = 20
export default data

 

page.js

data.js 모듈에서 받은 data를 my_data라는 변수명으로 재정의한 뒤 my_data를 콘솔에 출력한다. 

import my_data from "./data.js"

export default function Home() {
  return (
    console.log(my_data)
  )
}

20

 

named export

named export는 default export와 달리 여러 개의 변수 혹은 컴포넌트를 export 하는 것이 가능하다.

단, 반드시 import 하는 측에서 중괄호 { }를 사용해 가져와야 하며 이름을 재정의 하는 것이 불가능하다. (as를 사용해 별칭을 지정하는 것은 허용된다.)

 

data.js

export let age = 20
export let name = "nov"

 

page.js

import {age, name} from "./data.js"

export default function Home() {
  return (
    console.log(`name : ${name}, age : ${age}`)
  )
}

name : nov, age : 20

 

 

Component Export

변수뿐만 아니라 React의 Component를 반환하는 것 또한 가능하다. 

아래 코드는 export default 구문을 사용해 Hello World JSX 블록을 반환한 예제코드이다. 

 

data.js

export default function hello() {
    return (
        <div>Hello World!</div>
    )
}

 

page.js

import hello from "./data.js"

export default function Home() {
  return (
    hello()
  )
}

 

export default vs named default 

export default를 사용함으로써 얻는 이점은 다음과 같다.

1. import 하는 대상에게 해당 모듈의 대표 컴포넌트를 명시할 수 있다. Component Export 예제 코드를 예시로 들어보면 page.js에서는 data.js 모듈로부터 hello와 관련된 모듈이 넘어올 것이라는 것을 예측할 수 있다. 

2. 네이밍이 가능하기에 충돌이 날 가능성이 적다. 

 

그렇기에 라이브러리나 컴포넌트를 단일로 Export 하는 경우에는 export default를 사용하며,

유틸 함수 혹은 컴포넌트의 묶음을 보내야 하는 경우에는 named export를 사용하면 된다.