구조 분해 할당과 export/import, 그리고 index.js

이번 글에서 얘기할 건 이쁘게 import 하기 이다.

import component1 from "components/component1";
import component2 from "components/component2";
import component3 from "components/component3";
import blabla from "components/bla/blabla";
.
.
.

사실 제대로 된 활용을 할 줄 모를땐 import 구문이 차~ㅁ 길었다. 쓰면서도 "이게 맞나..?", "분명 이렇게 길게 안 쓸거 같은데..." 하며 불만스러워 했지만 어떻게 해야할지 모르는 채 그냥 그런가보다 하고 살고 있었다. 사실 이 때까진 JavaScript 니 es6 니 뭐니 제대로 이해 못한 채였기 때문인거 같다.

이걸 해결하게 된 계기는...

몇 가지 의문점들

우선 index.js 에 대한 의문이였는데, react에서 src/index.js 는 어떻게 알아서 실행되는거지...? 였다.
두 번째는

import React, { memo, useState } from "react";

memo 랑 useState 얘들은 뭔데 이렇게 불러오지..? 라는 의문.
아직 구조 분해 할당에 대해 뭔지도 잘 모르던 시기였다. 그래서 그냥 의문만 있었다.
이 의문을 해결하기 위해라기 보단 어떤 계기로 구조 분해 할당에 대해 리서칭을 하다가 저게 문득 떠오르며

어? 그러고보니 구조 분해 할당 같은 느낌으로 import 해오네?

하고 파고 들기 시작했다.

구조 분해 할당 얘기가 나왔으니 살짝 얘기하고 넘어가려 한다.

엉성한 예시

const array = [3, "5", { id: 23, value: 9 }, [10, 20]];
const object = {
	id: 30,
    	object2: {
        	blabla: ["b", "l", "a"],
        },
};

const [three, five, { id, value }, [ten, twenty]] = array;
const { id: thirty, object2: { blabla: array2 } } = object;

// 3 5 10 20
console.log(three, five, ten, twenty);

// 23 9 30 ["b", "l", "a"]
console.log(id, value, thirty, array2);

// Uncaught ReferenceError: object2 is not defined
console.log(object2);

쉽게 얘기하면 생긴거 그대~~~로 따라쓰면 받아 올 수 있다.
배열에다 할때는 원하는 변수명 적으면 되고, 객체의 경우엔 속성명을 따라 써야 받아올 수 있으나, 원하는 이름을 지정하고 싶으면 속성명: 원하는 변수명 의 형식으로 쓰면 된다.

다시 원래 하던 얘기로 돌아와서, 구조 분해 할당 리서칭을 끝낸 후 든 생각은,

객체 모양으로 구조 분해 할당을 해서 import 하는데, 이름이 지정되지 않아도 저게 된다..?
그렇단건 default export 를 하고 있는건가?
그럼 default export를 할 때 한 객체에 몽땅 담아 내보낸다면...?

이렇게 쓸 수 있지 않을까?!

// bla: { blabla } 이건 안됨!
import { component1, component2, component3, bla: { blabla } } from "components";

// 이건 됨! (단, 내보낼 땐 CommonJS의 module.exports 를 써야함)
const { component1, component2, component3, bla: { blabla } } = require("components");

결론부터 말하자면 bla: { blabla } 는 안 된다. 아직 리서칭을 해보지 않은 영역이라 어디서 주워들은 것과 지극히 주관적 의견을 섞어 추측해보자면... CommonJS 에선 내보낼 단일 객체를 module.exports 에 할당 하고, 그 전체를 한번에 불러와 거기서 구조 분해 할당을 하기에 가능한거고, es6의 import 는 일부만 불러오기에 바로 bla 를 구조 분해 할당 하려하면 "그래서 bla 가 뭔데???" 하고 오류를 뱉는 것 같다. 이 부분은 나중에 import 에 대해 더 찾아보기로 하고...

그럼 각각의 파일들은 어떻게 묶어서 내보내지...? 이 고민은 첫 번째 의문을 해결할 때 방법을 찾았다. 이 글 을 참고하여 첫 번째 의문은 해결했는데, 그와 별개로 리서칭 도중 components 폴더로 경로 설정을하면 components/index 로 경로 설정을 한 것과 같다는 걸 알았다.
그렇단건 index.js 에서 각각의 파일을 import 한 후 한번에 내보낸다면...?

물론 더 찾아보니 그렇게까지 할 필요 없이

components/index.js

export { default as component1 } from "./component1";
export { default as component2 } from "./component2";
export { default as component3 } from "./component3";
export { default as bla } from "./bla";

이렇게 하면 components 라는 폴더는 component1, component2, component3, bla 라는 놈들을 한 번에 내뿜고 있습니다~ 하고 알기도 쉽고, 원하는대로 한 번에 불러올 수 있게 되었다.
이제 원하는 대로 한 번에 불러오기가 가능해졌다!!!

마무리

많이 쪼개도 한 번에 불러올 수 있단 사실에 신난 나머지 길고 긴 App.jsx 를 나름의 기준을 가지고 쪼개고 쪼개서 결국 이렇게 되어버렸다.
길다 길어...
네이밍도 아직 갈 길이 멀다...

우리 더럽던 App.jsx 가 변했어요!

좋았던 점

import 가 짧아졌다!!!!!
그리고 이건 사실 예상치 못한 장점인데, 트러블슈팅과 테스트가 더 용이해진 것 같다.
코드가 쪼개지니 특정 부분에만 Suspense 를 적용시킨다던가, 어딘가에 오류가 났을때, 어느 단계에서 오류가 났는지 명확해지는 점이라던가...

아쉬웠던 점 등등...

일단 네이밍은 이것과 관련된건 아니니 차차 나아지도록 노력하는 걸로 하고...

어디까지 어떻게 나누는게 적절한가?

에 대한 고민을 계속 한 것 같다.
너무 과도하게 나누는 것도 과연 좋은 일인가? 하는 생각과
어떤 것을 기준으로 나누는게 적절한가? 등,
사실상 본인이 작성한 코드여도 1시간만 지나면 레거시 코드가 되어 외계인 고문서를 해석하듯 봐야하는게 코드라고 생각하는데 어딘가에서 Best Practice 를 볼 기회가 없었으니 타협점을 찾는게 참 힘들었다.

그래도 이런 고민을 하는 과정 하나하나가 성장으로 이어지지 않을까 생각해서 뿌듯하긴 했다.
앞으로도 적절한 폴더 구조 설계에 대해 고민해나가지 않을까...