🤔 index.js
오픈 소스나 다른 분들의 소스코드를 볼 때 각 컴포넌트별 디렉토리 안에 index.js를 쓴 경우를 자주 봤다.
이런식으로!
왜 사용하는건지 궁금했는데, 직접 찾아보고 사용해본 결과 넘나 좋은것..! 이렇게 각 폴더마다 index.js를 추가하는 방식을 barrel이라고 부르는 것 같았다. 저 index.js를 barrel file 이런식으로도 부르는듯!
✔ index.js를 곁들여보자
변경전
├─📁 components
│ ├─button
│ │ GreenButton.jsx
│ │ RedButton.jsx
│ │
│ ├─footer
│ │ Footer.jsx
│ │
│ ├─header
│ │ Header.jsx
│ │
│ ├─modal
│ │ Modal.jsx
│ │
│ └─section
│ Contents.jsx
│변경후 (index.js를 각 폴더마다 추가해줬다!)
├─📁 components
│ ├─button
│ │ GreenButton.jsx
│ │ RedButton.jsx
│ │ 📌index.js
│ │
│ ├─footer
│ │ Footer.jsx
│ │ 📌index.js
│ │
│ ├─header
│ │ Header.jsx
│ │ 📌index.js
│ │
│ ├─modal
│ │ 📌index.js
│ │ Modal.jsx
│ │
│ └─section
│ Contents.jsx
│ 📌index.js
│이런 방식으로 파일 구조를 사용하면 좋은 점은, 기존 방식과 달리 import를 하기 위해 들어가는 depth가 좀 더 얕아졌다는 점이다!
// 변경전
import Header from './components/header/Header';// 변경후 (index.js) 추가
import Header from './components/header';나는 index.js로 파일을 만들었는데, index.jsx를 사용하는 경우도 많은 것 같다. 그냥 .js를 쓴 이유는 jsx파일이랑 구분을 쉽게 하려고 사용한건데, 상황에 맞게 사용하면 될 듯 싶다!
이렇게 index.js를 추가하면 자동으로 import 되는 이유중 하나는, node가 실제 경로를 찾을 때 index.js를 찾기 때문이라고 한다. 한마디로 './components/header/index.js'를 간추려 쓴거라는 말!
🗂 한 폴더 안에 파일이 다수일 때
// 내보낼 때
export { default as GreenButton } from './GreenButton';
export { default as RedButton } from './RedButton';// 가져올 때
import { GreenButton, RedButton } from './components/button';이런 방식을 사용하지 않고 각 요소별로 폴더를 만들어서 예: (components/GreenButton/GreenButton.jsx) 쓰는 방법도 있는 것 같았는데, 한 폴더 안에 전부 사용하는 방법을 써서 export { default as 내보낼이름 } 이 방법을 사용했다! 👀
그런데 파일이 여러개 일 때는 굳이 index.js를 사용하지 않고
import GreenButton from './components/button/GreenButton';
import RedButton from './components/button/RedButton';기존처럼 사용하는 방식이 더 깔끔할 수도 있다고 한다. import할 파일이 늘어나면 하나의 import문 안에 여러 파일 이름이 생기다 보니 가독성이 저하될 수 있어 그런듯 싶다. 그렇지만 나는 한꺼번에 여러개를 import 해오는 방식이 더 깔끔하다고 느껴져서 그냥 index.js를 추가해줬다.
💫 마치며
항상 궁금했던 index.js의 역할을 알게된 순간이였다! 파일구조는 정답이 없는 문제이고, 이런 방식을 사용하는게 꼭 베스트 솔루션은 아닐 때도 있는 듯 싶다. 하지만 실제 프로젝트에 적용해봤는데 넘나릐 깔끔해보여서 만족중이다.
만약 더더욱 간편하게 import 해오고 싶다면 리액트 절대경로 라는 키워드로 검색해보는 걸 추천한다. CRA에서도 쉽게 사용 가능한 방법이 많이 나오니 극도의 깔끔함만 용납할 수 있다면 해당 방식이 더욱 적합할 수도 있겠다.
틀린부분이나 수정할 내용은 댓글로 부탁드립니다!
