React 101: 디렉토리 구조

문맥

React 기반 애플리케이션을 만드는 것은 React가 특정 디렉토리 구조를 제공하지 않기 때문에 어려울 수 있습니다. 많은 사람들이 자신의 구조를 가지고 있습니다. 그들처럼 나도 내 생각이 있다.

구성 요소 계층

용도에 따라 구성 요소를 봅니다. 일반적으로 공통, 기능 및 페이지의 세 가지 유형의 구성 요소가 있습니다.

공통 구성 요소는 Button , Modal , Accordion 등과 같이 일반적인 방식으로 사용할 수 있는 구성 요소입니다. 이러한 구성 요소는 응용 프로그램의 빌딩 블록을 의미합니다.

기능 구성 요소는 특정 기능에서 사용하는 구성 요소입니다. 기능을 사용자에게 제공하는 제품으로 볼 수 있습니다. 기능 구성 요소는 Authentication , User 등일 수 있습니다.

마지막으로 페이지 구성 요소는 사용자가 귀하의 기능과 공통 구성 요소를 사용할 수 있도록 하는 구성 요소입니다. Settings , Profile 등이 될 수 있습니다.

종속성

세 가지 유형의 구성 요소에는 서로 상호 작용할 수 있는 방법에 대한 일련의 규칙이 있습니다.



흔한
특징
페이지


흔한
✅


특징
✅
✅ 동일한 기능인 경우

페이지
✅
✅
✅ 같은 페이지인 경우

✅ - can use component

규칙에 대한 추론은 서로 다른 계층의 특수성 간에 관심사를 분리하기를 원하기 때문입니다. 응용 프로그램이 커지면서 알게 된 사실은 많은 구성 요소가 다른 위치에 얽혀 있다는 것입니다.

다음 세 계층을 구조화하면 다음과 같은 이점이 있습니다.

디렉토리의 의미론적 이름 지정을 통해 코드베이스를 보다 쉽게 ​​시각화하고 새로운 엔지니어가 이를 이해할 수 있습니다.

별칭을 사용하는 절대 경로를 더 쉽게 이해할 수 있습니다.

import { Button } from "@common/Button";
import { Dropdown } from "@common/Dropdown";
import { UserAvatar } from "@features/User/components/UserAvatar";

핵심 기능이 있는 위치에 대해 걱정할 필요가 없기 때문에 새 페이지 작성이 더 간단해집니다.

이 구조는 재사용을 위한 것이므로 설계자와 엔지니어가 보다 일관성을 유지하거나 기존 구성 요소를 사용하도록 촉구합니다

.

예시:

app/
|-- common/
   |-- Layout/
       |-- __tests__/
       |-- stories/
       |-- index.ts
       |-- Layout.tsx
       |-- Layout.scss
   |-- Button/
       |-- __tests__/
       |-- stories/
       |-- index.ts
       |-- Button.tsx
       |-- Button.scss 
   |-- Modal/
       |-- __tests__/
       |-- stories/ 
       |-- components/
           |-- ModalHeader/
              |-- index.ts
              |-- ModalHeader.tsx
              |-- ModalHeader.scss
           |-- ModalContent/
              |-- index.ts
              |-- ModalContent.tsx
              |-- ModalContent.scss
           |-- ModalFooter/
              |-- index.ts
              |-- ModalFooter.tsx
              |-- ModalFooter.scss
       |-- index.ts
       |-- Modal.tsx
       |-- Modal.scss 
|-- features/
     |-- User/
         |-- __tests__/
         |-- stories/
         |-- components/
             |-- UserAvatar/
                 |-- __tests__/
                 |-- stories/
                 |-- index.ts
                 |-- UserAvatar.ts
                 |-- UserAvatar.scss
         |-- hooks/
             |-- useUser.ts
             |-- useUserMutations.ts
         |-- constants.ts
         |-- helpers.ts
|-- pages/
    |-- Settings/
        |-- __tests__/
        |-- components/
            |-- UserTab/
                |-- __tests__/
                |-- stories/
                |-- index.ts
                |-- UserTab.tsx
                |-- UserTab.scss
        |-- index.ts
        |-- Settings.tsx
        |-- Settings.scss

구조 내에 존재할 수 있는 다른 파일/디렉토리는 다음과 같습니다.

__tests__

contexts

constants

helpers

hooks

stories

index.ts가 필요한 이유

엔지니어가 필요한 것을 훨씬 더 쉽게 찾을 수 있도록 실제 구현을 위한 명명된 파일이 있는 동안 구성 요소에 대한 진입점으로 index.ts를 사용합니다.

// without index.ts
import { Button } from "@common/Button/Button";

// with index.ts
import { Button } from "@common/Button";

약점

다른 디렉토리 구조와 마찬가지로 완벽하지 않습니다. 이 디렉토리 구조는 귀하의 팀이 귀하가 기능으로 고려할 항목을 결정해야 한다는 점에서 독단적입니다. 예를 들어 User는 UserProfile와 다른가요? UserProfile는 User 아래에 살 수 있습니다.

사람들이 좋아하지 않을 수 있는 또 다른 약점은 디렉토리가 얼마나 중첩될 수 있는지입니다.

결론

이 디렉터리 구조는 응용 프로그램을 구조화하는 의미 체계를 갖기 위한 것입니다. 이것이 전부이고 최종적인 솔루션이 되는 것은 아닙니다. 그것은 단순히 의미가 있고 저에게 효과가 있었던 솔루션입니다.

이 디렉토리의 특정 측면이 마음에 들고 채택하고 싶다면; 어떻게 채택할 계획인지 댓글로 알려주세요. 마음에 들지 않거나 개선 방법에 대한 제안이 있으면 의견에 알려주십시오.

참조

https://reactjs.org/docs/faq-structure.html