React에서 모듈을 사용해 불러올 때 아래처럼 어떤 것들은 중괄호{}를 쓰지 않아야 하고 또 어떤 것은 중괄호 안에 꼭 작성해야만 오류가 발생하지 않는다.
사실 나는 주로 자동 완성으로 import를 작성했었다. 그래도 자동 완성으로 작성된 것을 보면서 어떤 것은 왜 그냥 쓰이고 어떤 것은 중괄호{} 안에 작성되는 걸까? 궁금했다. 책에서도 설명되지 않았고 수업시간에도 언급되지 않았는데 오늘 동영상 강의를 들으며 그 차이를 알게 되었다.
exprt의 종류
default
export default ...
named
export const Something = ...;
결론적으로 {}쓰지 않은 것들은 default 키워드로 export된 것이다.
그래서 중괄호 안에 명시해주지 않아도 해당 경로에서의 기본값으로 export 된 값을 불러온다. default로 지정하지 않고 export한 named은 모두 {}안에 작성해주어야 한다.(하나의 js파일에서 default 값은 하나만 지정할 수 있다.)
확인해보자.
Test.js라는 파일을 만들고 안에 Test1와 Test2 컴포넌트를 만들었다. Test1은 export default Test1로 내보내줬고 Test2는 export만 사용해서 내보냈다.
App.js에서 Test1과 Test2를 불러올 때 기본값으로 내보낸 Test1은 중괄호 없이 작성하고 기본값이 아닌 Test2는 중괄호안에 불러올 이름을 명시해줘야 한다.
브라우저에도 정상적으로 렌더링 된 것을 확인할 수 있다.
기본값으로 내보내진 컴포넌트를 import {Test1, Test2} from './test/Test1' 와 같이 작성하면 오류가 발생한다.
만약 import {Test1, Test2} from './test/Test1'로 작성하고 싶다면 Test1을 default키워드 없이 Test2처럼 export 해주면 된다.
❗ export default 한 값은 as없이 import 할 때 변수명을 바꿀 수 있다.
기본값으로 내보내진 값은 가져올 때 다른 변수명으로 작성해도 해당 값을 가져온다.
Test1.js로 가서 다시 Test1을 export default Test1 으로 내보내주고 App.js에서 컴포넌트 이름을 변경해보았다.
브라우저에도 동일하게 렌더링 된다.
Test2의 컴포넌트 이름도 바꾸고 싶다면 as를 사용하면 된다.
요약
- default export는
import 이름 from '경로'로 작성하여 모듈을 불러온다.(중괄호를 쓰지 않음) - named export는
import {이름} from '경로'로 작성하여 모듈을 불러온다.(중괄호 안에 작성함)
