[React] React 프로젝트에서 Import 관리하기

 

https://codingtoddlerr.tistory.com/231

위 글을 작성하고 나서 궁금한게 생겨 글을 쓴다.

 

리액트가 상속보다 조합에 특화된 언어이기 때문에 여러 컴포넌트를 import 하는 방식으로 조합해서 사용하는 것이 재사용성과 유연성 증대에 이점이 된다는 것은 알겠다.

 

그러면 많은 수의 컴포넌트를 import 하는 경우 import 구문이 엄청 길어질 것 같은데, 이것들은 어떻게 처리하면 좋을지에 대해 궁금했다.

 

찾아본 방법은 다음과 같다.

 

1. index.js 파일 생성

---

다음과 같은 코드가 있다고 하자.

 

App.js

<Modal>
  <ModalOpenButton>
    <Button variant="secondary">Register</Button>
  </ModalOpenButton>
  <ModalContents aria-label="Registration form">
    <ModalDismissButton>
      <CircleButton>
        <VisuallyHidden>Close</VisuallyHidden>
        <span aria-hidden>×</span>
      </CircleButton>
    </ModalDismissButton>
    <ModalTitle>Register</ModalTitle>
  </ModalContents>
</Modal>

 

 

폴더 구조는 아래와 같다.

중요한 점은 해당 폴더 내의 컴포넌트를 모두 한 번에 내보내는 파일로  각 index.js 를 생성하는 것이다.

src/
|-- components/
|   |-- Modal/
|   |   |-- Modal.js
|   |   |-- ModalOpenButton.js
|   |   |-- ModalContents.js
|   |   |-- ModalDismissButton.js
|   |   |-- ModalTitle.js
|   |   |-- index.js  // `Modal` 폴더의 index.js 파일
|-- styles/
|   |-- mixins.js  // 믹스인 파일
|   |-- theme.js  // 테마 파일
|-- App.js
|-- index.js

 

 

2. index.js 파일 예시

---

export { default as Modal } from './Modal';
export { default as ModalOpenButton } from './ModalOpenButton';
export { default as ModalContents } from './ModalContents';
export { default as ModalDismissButton } from './ModalDismissButton';
export { default as ModalTitle } from './ModalTitle';

 

 

3. App.js 파일 예시

---

import { Modal, ModalOpenButton, ModalContents, ModalDismissButton, ModalTitle } from './components/Modal';

// 다른 코드...

 

첫 번째 예제를 현재 예제와 비교해 보면 코드가 훨씬 더 읽기 쉽고 짧아 보이는 것을 알 수 있다.

 

 

+) Tree shaking Issue 

이 부분은 추후에 추가 하겠다.

https://bitsofco.de/what-is-tree-shaking/