Plmography 프로젝트 작업 로그 #29 - React 에서 import 문 중괄호 의미 (23.01.10 TIL)

 프론트에서 생성한 스토어를 테스트하던 도중, 테스트는 다 통과하는데 콘솔로 아래와 같은 에러가 떴다.

구글링을 해보니 axios 가 에러이거나, api 서비스에서 url 의 경로를 잘못 설정하거나, 슬래시('/') 를 붙이지 않은 경우 발생한다는 답변이 대부분이어서 모두 확인해 봤는데도 에러가 사라지지 않았다. 그러던 와중 8000 번대 호스트를 미리 지정해놓은 baseUrl 의 import 문이 뜬금없이 중괄호로 쌓여져 있는 것을 발견했다. 

// config.js
const config = {
  apiBaseUrl: 'http://localhost:8000',
};

export default config;

----------------------------------------------

// 내가 import 해온 것
const { baseUrl } = config.apiBaseUrl;

원래 중괄호로 쌓여져 있는 모양이 아니었던 것 같아서 중괄호를 없애주니 콘솔 에러가 사라졌다. import 문의 중괄호 유무를 한 번 정리했었는데 그새 깜빡한 것 같다 ^^;

아래 import 문을 토대로 다시 한 번 정리해보자.

// App.js 변수 선언

const vue = 1;
const react = 2;

export default vue;        // default 키워드를 붙여 export
export { react };          //객체에 담아 export
export const angular = 3;  //선언과 초기화를 동시에 해서 export

------------------------------------------

// import 형태
import view, { react, angular } from 'App.js';

import 문에서 view 변수는 vue 를 'view' 로 명명한 것이다. 어떻게 가능할까?

변수에 default 키워드를 붙여 export 하면 App.js 내에서 '기본' 으로 지정한 변수이기 때문에 from 'App.js' 구문에서 import 되는 변수는 무조건 vue 가 된다. 내보내는 기본 변수는 무조건 vue 로 고정되어 있기 때문에 어떤 이름으로 명명해도 상관없다.

그래서 반대로 생각해보면 default 가 붙지 않은 변수는 { } 중괄호를 사용하여 import 해야 한다는 걸 알 수 있다.

나의 경우에도 config 컴포넌트를 default 키워드를 붙여 export 했기 때문에 중괄호는 필요 없는 경우여서 http 를 찾을 수 없다고 에러가 났던 것 같다.