[import 정리] 같은 파일에 있는 모듈을 Index 파일로 묶어 export 하기

이번 기업협업을 통해 import를 깔끔하게 정리하는 법을 알 수 있었다.

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import EquipPieChart from './components/EquipPieChart';
import TruckBarChart from './components/TruckBarChart';
import EquipDate from './components/EquipDate';
import timeStore from '../../stores/timeStore';
import EquipDataAPI from '../../assets/data/equipData.json';

위의 코드가 아래의 코드가 되었다. 훨신 깔끔해지고 가시성도 높아졌다.

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import {
  EquipAnalysisPieChart,
  EquipAnalysisBarChart,
  EquipAnalysisDate,
} from '.';
import { timeStore } from 'stores/timeStore';
import EquipDataAPI from 'assets/data/equipData.json';

../../을 없애고 싶다면 절대경로를 설정해주어야 하는데 이것은 

https://jeongeuni.tistory.com/61

[절대경로 설정하기] jsconfig.json

이 글을 참고해주길!

---

< index 파일로 묶어 export 하기 >

pages 폴더에 있는 Equipment 폴더를 index로 관리해보겠다.

먼저!!! 그 전에 꼭 해야하는 것이 있다.

import 해서 편하게 사용하려면 export default 말고 export const …. 이런 식으로 사용해야한다.

예를 들어 아래처럼!

export const EquipDetailBarChart = ({ datailBarChartData }) => {
    어쩌고 저쩌고
};

이렇게 export const 해줬다면 index.js로 관리할 준비가 되었다.

---

1. Equipment 폴더 안에 components 폴더와 EquipAnalysis, EquipDetail, EquipList 파일이있다.

index.js에 아래의 내용처럼 components 폴더를 export 해주자.

---

2. components 폴더에도 index.js를 생성해주자.

components의 index.js에 아래의 내용처럼 모든 폴더를 export 해주자.

---

3. EquipAnalysis 에서 파일을 import 해오자!

---

이처럼 같은 파일에 있는 모듈은 Index 파일로 묶어서 export 한다면 import 코드가 훨씬 깔끔해진다 : )