[리액트] import 구문에서 언제 중괄호 { }를 사용할까? (export와 export default의 차이점)

한 파일에 코드가 너무 길어지면 유지, 보수가 힘들기 때문에 기능별로 코드를 나눠 필요할때마다 불러주는 작업을 한다. 이를 모듈화라고 한다. 모듈이란 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미하며 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다.

 

이때 기능별로 쪼개진 모듈을 파일에 불러오기 위해 사용하는 키워드가 "import"다. 반대의 개념으로 export가 있는데 import할 수 있는 모든 모듈은 export로 내보내진 모듈이다.

 

리액트에서 라이브러리나 다른 컴포넌트를 불러올때도 import라는 키워드를 사용한다. 예를들어 App.js라는 컴포넌트에서 About.js라는 컴포넌트를 불러올때 또는 Home.js 컴포넌트에서 react-router-dom 라이브러리를 불러올때 import라는 키워드를 사용한다.

 

App.js라는 컴포넌트에서 About.js라는 컴포넌트를 불러올때

import About from './About'

Home.js 컴포넌트에서 react-router-dom 라이브러리를 불러올때

import { Router } from 'react-router-dom';

 

이처럼 리액트를 사용해 프로젝트를 만들다보면 import할일이 많다. 위에 있는 코드처럼 어떤때는 중괄호를 사용하고 어떤것은 사용하지 않는다. 그 차이가 무엇일까?

 

export default로 내보냈을때

1. 중괄호를 생략해서 import한다

// Home.js
import About from './About';

// About.js
export default About;

2. 새로운 이름으로 import 할 수 있다

// Home.js
// 아래의 코드에서는 About이 Newname이라는 새로운 이름으로 import된다
import NewName from './About'

// About.js
export default About;

 

default 없이 그냥 export할때

1. 중괄호를 붙여 import한다

// Home.js
import {Something} from './About';

// About.js
export Something;

2. as 키워드를 사용해서 새로운 이름으로 import 할 수 있다

// Home.js
import {About} from "./About";
import {About as About2} from "./About2";

// About.js
export About;

// About2.js
export About;

 

한개의 모듈에 단 하나의 default export만 있을 수 있지만 export는 개수의 상관없이 많이 가질 수 있다

// Home.js
import About, {Something, Anything} from './About'

// About.js
export default About;
export Something;
export Anything;