export default 와 export 의 차이

오랜만에 WPF 건드렸다가 머리좀 식힐겸 리액트를 건드려봤다.

 

자세한 내용은

https://beta.reactjs.org/learn/importing-and-exporting-components#default-vs-named-exports

에 있긴한데... 코드로 요약하면 아래와 같다.

 

/* MyComponent.js 파일이라고 가정 */

function MyComponent1(){
	return <>MyComponent1</>;
}

function MyComponent2(){
	return <>MyComponent2</>;
}

export MyComponent2;
export default MyComponent1;

 

위와 같이 MyComponent.js 파일내에 MyComponent1 과 MyComponent2 가 있다.

MyComponent1 이 default export 로 선언되었고, MyComponent2 는 named export 로 선언된 상태이다.

위 MyComponent.js 를 import 하는 js 파일 내에서는 MyComponent1 함수가 기본적으로 default 값으로 선언이 된다.

일반적으로는 MyComponent1의 경우 아래와 같이 선언한다.

 

/* App.js 파일이라 가정 */
import MyComponent1 from './MyComponent';

function App(){
	return <><MyComponent1 /></>;
}

export default App;

 

하지만, 위에서도 언급하였듯, MyComponent1 함수가 default 값으로 선언되어있어 아래와 같은 방식으로도 가능하다.

 

/* App.js 파일이라 가정 */
import MyComponent3 from './MyComponent';

function App(){
	return <><MyComponent3 /></>; /*이렇게 선언해도 default로 선언된 MyComponent1 이 출력값으로 나온다.*/
}

export default App;

 

당연한 이야기지만, 하나의 모듈 내의 default 값은 1개만 선언할 수 있다.

( default 값이 2개이상이라면 위와 같이 MyComponent3 의 경우, 무엇을 가리키는지 알 수 없다. )

그러면 MyComponent2 는 어떻게 출력해야할까?

답은 아래와 같다.

 

/* App.js 파일이라 가정 */
import {MyComponent2} from './MyComponent';

function App(){
	return <><MyComponent2 /></>
}

export default App;

 

named export 된 함수에 대해서는 import {명명된 익스포트 함수명} from 모듈 경로; 로 설정해주면 된다.

그럼 default export 된 함수도 같이 불러오기 위해선 어떻게 해야할까?

먼저, 아래와 같이 해보았다.

 

/* App.js 파일이라 가정 */
import {MyComponent1, MyComponent2} from './MyComponent';

function App(){
	return <><MyComponent1 /><MyComponent2 /></>
}

export default App;

 

이렇게 하면 아래와 같은 오류를 볼 수 있다.

 

export 'MyComponent1' (imported as 'MyComponent1') was not found in './MyComponent' (possible exports: MyComponent2, default)

 

MyComponent1 은 MyComponent 파일 내에서 찾을 수 없고 가능한 export 는 MyComponent2 와 default 뿐이라고 한다.

 

이를 아래와 같이 고쳐볼 수 있다.

 

/* App.js 파일이라 가정 */
import {default as MyComponent1, MyComponent2} from './MyComponent';

function App(){
	return <><MyComponent1 /><MyComponent2 /></>
}

export default App;

 

여기서 default as MyComponent1 을 default as MyComponent3 으로 바꾸고

App 함수에 있는 <MyComponent1 /> 을 마찬가지로 <MyComponent3 /> 으로 바꾸어도 정상적으로 작동한다.

 

예제를 적기 위해 이렇게 적긴했지만

실제로 현장에서 사용할 때는 가능하면 export 명과 통일하여 이름짓는 편이 가독성 측면에서 유리할 것 같고

불가피하게 서로 다른 컴포넌트 파일에 같은 함수명이 있을 경우에 쓰일 법해보인다.