export default vs export

Next js 를 공부중이다.

Next js Document를 따라가면서 Next js 공부를 하고 있는데

나는 주로 arrow function 을 사용하기 때문에 Document에 있는 funciton들을 모두 arrow function으로 고쳐서 코딩하고 있었다.

arrow function을 사용하는 이유는

1. 편해서
2. 스코프가 달라서이다.

그냥 function을 사용하게 되면 this의 범위가 생기게 된다.

따라서 function을 사용하게 되면 스코프가 생기게 되는 것이다.

이런 상황에서 export default vs export 에 대해서 알아볼 이유가 생겼다.

먼저 arrow function의 경우 export 할 때는 export default 를 사용해야 한다.

이 경우에 import 할 때 이름을 지정해줄 특별한 이유가 없다.

따라서 사용할 때 import 뒤에 {} 를 넣어줄 필요가 없다.

import getSortedPostsData from '../lib/posts';

정확하게 내가 마주한 Error는 다음과 같다.

TypeError: (0, _lib_posts_WEBPACK_IMPORTED_MODULE_3__.getSortedPostsData) is not a function

getSortedPostsData는 function이 아니라는 타입 에러인데 

export 의 경우는 기본적으로 뒤에 붙은 변수나 클래스/함수가 밖으로 나가게 된다.

하지만 export deafult 를 하는 경우 객체 형식으로 export 하게 된다.

이러한 상황에서

import {getSortedPostsData} from '../lib/posts';

이런식으로 중괄호를 넣어주게 되어서 TypeError가 나온 것이다.

PS. typescript를 사용하면 type과 관련된 에러를 잡아줄 수 있다.