[React] 컴포넌트 export 하는 방법 (default, named)

리액트에서 export란?

리액트로 무언가를 개발할 때, 컴포넌트 단위로 나누어서 하나의 페이지를 구성하게 된다. 따라서, 부모 컴포넌트에 여러 개의 자식 컴포넌트들을 import 하는 상황이 생기게 되는데, import 하기 위해서는 자식 컴포넌트를 export 해줘야 한다.

요약하자면, export는 컴포넌트의 재사용을 위해 import 되기 위한 권한 설정이라고 할 수 있다.

 

export의 종류

default export

const List = () => {
    return <div></div>
}

export default List;

우리가 일반적으로 가장 많이 쓰는 export 방식으로 파일 안에 하나의 함수만 있을 때 쓰이는 기본적인 방식이다.

default 방식은 기본 이름을 사용하는 방식으로 함수 이름인 List를 그대로 사용한다.

 

import List from './List';

import 할 때도 이런 식으로 가져온다.

 

named export

export const List = () => {
    return <div></div>
}

export const Content = () => {
    return <div></div>
}

named 방식은 하나의 파일 안에 여러 개의 함수를 각각 따로 export 하고 싶을 때 사용하는 방식이다.

함수 선언 앞에 export를 붙여서 사용하는 방식이다.

 

import { List, Content } from './List';

import 할 때는 중괄호를 씌워줘야 한다.

 

named export의 이름 충돌을 막기 위한 as

// List.js
export const MyComponent = () => {
    return <div></div>
}

// Content.js
export const MyComponent = () => {
    return <div></div>
}

위의 코드처럼 다른 파일 안에서 같은 이름의 함수를 export 하는 경우가 생길 수 있다.

서로 같은 파일에서 import 하는 상황이 아니라면 상관없겠지만, 만약 List.js와 Content.js의 MyComponent라는 함수를 하나의 파일에서 import 하게 되는 상황이 생긴다면 이름 충돌이 발생할 것이다.

 

// App.js => 이름 충돌 발생 (X)
import { MyComponent } from './List';
import { MyComponent } from './Content';

// App.js
import { MyComponent } from './List';
import { MyComponent as ContentComponent } from './Content';

function App() {
    return <div>
        <MyComponent />
        <ContentComponent />
    </div>
}

위처럼 같은 이름의 컴포넌트를 import 하게 되면, 이름 충돌이 발생하므로 하나는 다른 이름으로 바꿔줘야 한다.

직접 그 파일로 들어가 함수의 이름을 바꿔줘도 되지만, import 할 때 as를 사용할 수도 있다.

 

default와 named 방식을 같이 사용할 수도 있다.

const List = () => {
    return <div></div>
}

export const Content = () => {
    return <div></div>
}

export default List;

하나의 파일 안에 export 방식을 하나로 정할 필요는 없다. 만약에 이 파일 전체를 export 하고 싶으면서, 특정 함수만 따로 export 하고 싶을 수도 있다. 이럴 때는, default 방식과 named 방식을 같이 사용하면 된다.

 

import List, { Content } from './List';

import 할 때도 각각 방식에 맞춰서 named에만 중괄호를 씌워주면 된다.

 

1. default 방식은 파일 전체를 export 할 때 사용. export default '함수명';
2. named 방식은 파일 안에 여러 개의 함수를 각각 따로 export 할 때 사용. 함수 선언 앞에 export 붙이기.
3. named 방식에서 이름 충돌을 막기 위해, import에서 as 사용 가능.