React | named export vs default export

리액트에서 import 하는 부분을 보면

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

를 볼 수 있다.

import React from "react";

는 react 패키지에서 React 변수를 가져왔고
import { BrowserRouter, Routes, Route } from "react-router-dom";

react-router-dom에서 BrowserRouter, Routes, Route들을 가져왔다.

근데 윗 문장은 중괄호 {}가 없고 아래 문장은 {} 가 있는데 이 둘의 차이는 무엇일까?

이 두 문장의 차이는 바로 보내주는 export 방법의 차이에서 있다. 모듈을 불러올 때 import 해줘야 하는 것처럼 모듈은 다른 곳으로 내보낼 때 export를 해줘야 한다.

아래와 같은 App.js가 있다.

import React from "react";
import Content from "./Content";

const App = () => {
  return (
      <Content />
  );
};

export default App;

그리고 아래는 Mainpage.js에서 import 되고 있는 Content.js이다.

import React from "react";

function Content() {
    return (
        <div>
            hello world
        </div>
    )
}

export default Content;

import React from "react";

export default function Content() {
    return (
        <div>
            hello world
        </div>
    )
}

위의 두 코드는 export default의 위치 차이인데 위의 형태가 Default Export인 기본 형태이며 아래 코드가 이름으로 export 된 named export이다. 현재 둘은 같은 결과를 나타낸다.

export default는 컴포넌트 중에 어떤 컴포넌트를 기본적으로 추출할 것인지를 뜻한다.

만약에 function 컴포넌트가 여러 개인 경우

import React from "react";

function ContentA() {
    return (
        <div>
            hello world
        </div>
    )
}

export function ContentB() {
    return (
        <div>
            hello world baby
        </div>
    )
}

export default ContentA;

ContentB 라는 컴포넌트를 추가해주었고 앞에 export 로 내보냈지만 화면 상에는 ContentA 컴포넌트만 렌더링된다. 왜냐하면 지금 기본 값은 ContentA 이기 때문에 App.js에 import 되지 않는다.

이럴 때 기본이 아닌 컴포넌트인 ContentB를 띄우려면 App.js에서 {} 중괄호를 이용해 import 해주면 된다.

import React from "react";
import Content, {ContentB} from "./Content";

const App = () => {
  return (
      <ContentB />
  );
};

export default App;

컴포넌트 ContentA, ContentB를 둘다 띄우고 싶다면?

import React from "react";
import ContentA, {ContentB} from "./Content";

const App = () => {
  return (
      <>
        <ContentA />
        <ContentB />
      </>
  );
};

export default App;

import 기본이 되는 컴포넌트, {기본이 아닌 컴포넌트} 이런 형태로 불러올 수 있다.

이 때 기본이 되는 컴포넌트는 꼭 Content.js에서 export 되었던 이름과 같을 필요 없으며 아래와 같이 다른 이름을 붙혀줄 수 있다. 하지만 named export는 중괄호안에 export 되었던 이름과 동일해야 렌더링된다. 다른 이름으로 import 할 수 있으나 import ContentA, {ContentB as blahblah} from "./Content"; 처럼 as를 사용해야 한다.

import React from "react";
import A, {ContentB} from "./Content";

const App = () => {
  return (
      <>
        <A />
        <ContentB />
      </>
  );
};

export default App;

default로 export 되는 컴포넌트는 단 한가지여야 하며 기본이 없을 수는 있다.

Content.js로 돌아와 기본으로 export 되는 컴포넌트가 없고 두개의 컴포넌트에 export를 붙여주었다.

import React from "react";

export function ContentA() {
    return (
        <div>
            hello world
        </div>
    )
}

export function ContentB() {
    return (
        <div>
            hello world baby
        </div>
    )
}

기본이 없는 경우는 {컴포넌트1, 컴포넌트2} 이런 형태로 두개의 컴포넌트 모두 중괄호 안에 넣어준다.

import React from "react";
import {ContentA, ContentB} from "./Content";

const App = () => {
  return (
      <>
        <ContentA />
        <ContentB />
      </>
  );
};

export default App;

export를 반복해서 써주는게 싫다면 맨 밑에 한번에 export도 가능하다.

import React from "react";

function ContentA() {
    return (
        <div>
            hello world
        </div>
    )
}

function ContentB() {
    return (
        <div>
            hello world baby
        </div>
    )
}

export {ContentA, ContentB}

그 와중에 ContentB를 기본으로 설정하고 싶다면 as default를 붙여준다.

import React from "react";

function ContentA() {
    return (
        <div>
            hello world
        </div>
    )
}

function ContentB() {
    return (
        <div>
            hello world baby
        </div>
    )
}

export {ContentA, ContentB as default}