확장되는 React 구성 요소의 폴더 구조

Greg Rakozy의 배경 이미지



오픈 소스 반응 프로젝트에 많은 시간을 보내고 직접 반응 구성 요소를 작성한 후 반응 구성 요소를 만드는 가장 좋은 방법은 다음과 같습니다.

또한 이것은 다른 사람들이 빠르고 쉽게 시작하는 데 도움이 될 수 있습니다.

예를 보자. 내부에 두 개의 파일이 있는 폴더Card가 있다고 가정합니다. 첫 번째는 프로젝트에서 index.js 및 Card.tsx입니다.

Card
├── index.tsx
└── Card.tsx

코드는

// 📄 Card/Card.tsx
const Card = () => <></>

export default Card

// 📄 Card/index.tsx
export { default } from './Card'

이와 같이 구성 요소를 만든 후에는 다음과 같이 다른 구성 요소로 가져올 수 있습니다.

// 📄 pages/Login/Login.tsx
import Card from 'components/Card'

const Login = () => (
  <Card> 
    ...
  </Card>
)

export default Login

그리고 구성 요소를 페이지에 결합할 수 있습니다.

├── components
│   ├── Button
│   │   ├── Button.tsx
│   │   └── index.tsx
│   ├── Card
│   │   ├── Card.tsx
│   │   └── index.tsx
│   ├── Footer
│   │   ├── Footer.tsx
│   │   └── index.tsx
│   ├── Header
│   │   ├── Header.tsx
│   │   └── index.tsx
│   └── SideNav
│       ├── SideNav.tsx
│       └── index.tsx
└── pages
    └── AdminDashboard
        ├── AdminDashboard.tsx
        └── index.tsx

대시보드 구성 요소의 코드는 다음과 같습니다.

// 📄 pages/AdminDashboard/AdminDashboard.tsx
import Button from 'components/Button'
import Card from 'components/Card'
import Header from 'components/Header'
import SideNav from 'components/SideNav'
import Footer from 'components/Footer'

// You can omit the Header, SideNav, and Footer to the layout comment if you wanted to.

const AdminDashboard = () => (
  <>
    <Header />
    <SideNav />
    <Card>
      ...
    </Card>
    <Footer />
  </>
)

export default AdminDashboard

이 패턴은 도움이 됩니다.

🙈 캡슐화 - 세부 구성 요소가 아닌 폴더에서 구성 요소를 가져오면 이 값이 증가합니다.

♻️ 재사용성 - 캡슐화된 구성 요소가 다른 구성 요소와 분리됩니다. 일단 격리되고 종속성이 없어지면 재사용성도 높아집니다.

👀 확장성 - 격리된 구성 요소를 구성할 수 있으며 더 큰 구성 요소 또는 페이지에 재사용 가능

예를 들어 pancake-frontend과 같은 많은 오픈 소스 반응 프로젝트에서 이 패턴이 사용되는 것을 볼 수도 있습니다.

pages
└── AdminDashboard
    ├── AdminDashboard.tsx
    ├── components
    │   ├── SalesChart
    │   └── SearchNav
    └── index.tsx

그럼에도 불구하고 index.tsx, {component-file-name}.tsx} 파일을 생성하고 매번 반복되는 코드를 작성하는 것은 너무 귀찮을 수 있습니다.



new-component CLI 도구를 소개합니다.
new-component는 예를 들어 우리가 읽은 방식으로 새로운 React 구성 요소를 빠르게 생성하기 위한 CLI 유틸리티입니다.
Header라는 구성 요소를 만들겠습니다.

$ new-component Header

그러면 결과는

09:38:54 in ~/Desktop/new-component-test
➜ new-component Header


✨  Creating the Header component ✨


Directory:  src/components/Header
Type:       functional  class  pure-class
=========================================


✓ Directory created.
✓ Component built and saved to disk.
✓ Index file built and saved to disk.


Component created! 🚀
Thanks for using new-component.

또한 생성된 파일, 출력 디렉터리 및 해당 확장자를 구성할 수 있습니다.

➜ new-component --help
Usage: new-component [options] <componentName>

Options:
  -V, --version                    output the version number
  -t, --type <componentType>       Type of React component to generate (default: "functional") (default: "functional")
  -d, --dir <pathToDirectory>      Path to the "components" directory (default: "src/components") (default: "src/components")
  -x, --extension <fileExtension>  Which file extension to use for the component (default: "js") (default: "js")
  -h, --help                       output usage information

즐기면서 구성 요소를 만들고 읽어 주셔서 감사합니다. 😊