React 컴포넌트 구조화하기

따라서 create-react-app으로 프로젝트를 설정합니다. 파일App.js과 폴더components가 있습니다. 매일 새로운 구성 요소를 추가하면서 기능을 작성하기 시작합니다. 그리고 갑자기 같은 폴더에 30개의 파일이 있고 당신은 잃어 버렸습니다.

이것은 당신에게 친숙합니까? 그런 다음 가능한 솔루션에 대해 알아보겠습니다.

구성품 인벤토리 평가

각 구성 요소가 하는 일과 구성 요소 계층에서 컨테이너에서 자식으로 배치되는 위치를 이해하는 것이 필요합니다. 이러한 이해를 얻으려면 각 구성 요소를 살펴보고 다음과 같은 질문을 하십시오.

이 구성 요소는 컨테이너 구성 요소(상태를 유지하고 이를 props로 전달) 또는 프리젠테이션 구성 요소(props를 수신하고 렌더링)입니까?

부모는 무엇이며 이 구성 요소의 자식은 무엇입니까(예: <Table> , <TableRow> , <TableCell> ) ?

이 구성 요소를 얼마나 재사용할 수 있습니까? 처리된 데이터에 얼마나 의존적입니까? 생성하는 마크업은 얼마나 구체적입니까?

이 구성 요소가 다른 기능에서 호출하려는 기능을 구현합니까?

그런 다음 App.js부터 시작하여 구성 요소의 전체 인벤토리를 작성하십시오. 다음은 내가 사용하는 템플릿입니다.


이름
역할
재사용 가능
내보내기 기능?


앱
컨테이너




BgSearch
컨테이너




테이블
용기, 프레젠테이션




테이블 행
용기, 프레젠테이션




테이블셀
프레젠테이션
예



페치훅
유틸리티
예
예


이 통찰력을 통해 애플리케이션을 구성할 준비가 된 것입니다.

시맨틱 폴더 이름

의미 체계 폴더 이름을 사용하여 앱을 새로운 구조로 변환합니다.

먼저 모든 컨테이너 및 프레젠테이션 구성 요소를 구성합니다.

레이아웃: 헤더, 기본, 탐색 모음 및 바닥글과 같은 전체 레이아웃 구조를 나타내는 컨테이너 및 프리젠테이션 구성 요소

페이지: 페이지는 애플리케이션의 고유한 부분으로, 기본 컨테이너 구성 요소와 재사용할 수 없는 모든 프리젠테이션 구성 요소를 그룹화합니다.

구성 요소: 단추, 카드, 상자와 같은 기타 모든 재사용 가능한 구성 요소

둘째, Utils의 특성을 식별하고 적절한 폴더로 이동합니다.

Redux: React Redux를 사용하는 경우 테스트를 포함한 모든 코드를 이 폴더 안에 넣습니다.

후크: 모든 재사용 가능한 후크가 여기에 배치됩니다

.

Utils: 다른 모든 내보낸 기능을 여기에 배치합니다.

다음은 내 보드 게임 앱에 적용된 구조입니다.

src
├── App.js
├── index.js
├── components
│   ├── BgCard.js
│   ├── ...
├── hooks
│   ├── usePagination.js
│   └── withFetchData.js
├── layout
│   ├── Footer.js
│   ├── Loader.js
│   ├── ...
├── pages
│   ├── accountlogin
│   │   └── AccountLogin.js
│   ├── accountregister
│   │   └── AccountRegister.js
│   ├── bgsearch
│   │   ├── BgSearch.js
│   │   ├── BgSearchTable.js
│   │   ├── BgSearchTableRow.js
│   │   ├── ...
│   ├── homepage
│   ├── myaccount
│   ├── mycollection
│   ├── userprofile
│   └── usersearch
├── redux
│   ├── actions.js
│   ├── reducers.js
└── utils
│   ├── utils.js
└── ├── transformXML.js

의미 구성 요소 이름

당신은 좋은 길을 가고 있습니다. 이제 마지막 작업은 위에 표시된 <BgSearch>, <BgSearchTable>, <BgSearchTableRow> 와 같이 구성 요소가 나타나는 의미 순서대로 구성 요소의 이름을 지정하는 것입니다. 이것은 복잡한 페이지의 구조에 대한 서면 단서를 제공하고 구조에 대해 생각하는 데 도움이 됩니다.

결론

이 게시물은 React 앱을 앱 구성 요소 계층 구조를 반영하는 시맨틱 폴더 이름으로 구조화하는 방법을 설명했습니다. 이 구조를 사용하면 각 코드 조각을 잘 정의된 위치에 배치하는 데 도움이 됩니다.