React 프로젝트를 쉽게 확장하는 5가지 좋은 방법

대부분의 React 개발자에게는 새로운 코드 라인을 작성하는 것이 쉽습니다. 그러나 때때로 우리는 프로젝트 규모로 향후 사용을 위해 그것들을 체계적으로 유지하고 계획하는 것을 놓쳤습니다.

확장 계획이 있으면 다음과 같은 도움이 될 수 있습니다.

재사용 및 개발 시간 단축

프로젝트 구성 및 프로젝트 재구축 방지

프로젝트와 다른 개발자를 고려하여 당신이 훌륭한 개발자임을 보여주세요 :)

다음은 React 프로젝트를 확장하면서 배운 5가지 교훈입니다. 멋진 React 코드를 작성하면서 프로젝트를 미리 계획하는 데 도움이 됩니다.

1. 항상 상태 관리부터 시작하십시오.

프로젝트가 작을 때 개별 구성 요소에 대한 쓰기 상태로 바로 뛰어 들었습니다. 그러나 여러 구성 요소의 상태를 동기화하고 소품 및 콜백 함수를 사용하려고 할 때 지저분해졌습니다.

Redux, Recoil, 컨텍스트 및 후크 등 항상 상태 관리 도구로 시작하십시오. 프로젝트가 작더라도 전역적으로 관리하려면 Authenticaiton 및 Alert가 필요합니다.



게다가 상태 관리는 구성 요소에서 논리를 분리합니다. 백엔드 호출을 처리할 때 UI와 데이터베이스 사이에서 컨트롤러/서비스 계층 역할을 합니다. 이 계층의 상태 및 작업은 여러 구성 요소에서 재사용할 수 있습니다.

여기서 팁은 항상 조건부 구성 요소 렌더링을 위한 백엔드 호출의 대기 상태를 추적하는 것입니다. 불필요한 오류와 사용자에게 표시되는 멋진 로딩 스피너를 방지합니다.

2. 나만의 컴포넌트 라이브러리 만들기

Material UI와 같은 UI 라이브러리를 사용하는 경우에도 프로젝트의 소품, 논리 및 스타일에 대한 사용자 지정이 여전히 필요하다는 것을 알았습니다.

사용자 지정 구성 요소 라이브러리를 생성하면 여러 페이지에서 재사용하고 다른 프로젝트로 내보낼 수도 있습니다.

각 사용자 정의 구성 요소에 대한 스타일, 테스트, 유형 및 Storybook 템플릿(권장)을 포함합니다. 다음과 같이 atomic design에 라이브러리를 구성하는 것이 좋습니다.

custom-components
├── atoms
│   └── CustomButton
│       ├── CustomButton.tsx
│       ├── CustomButton.types.tsx
│       ├── CustomButton.styles.tsx  
│       ├── CustomButton.test.tsx
│       ├── CustomButton.stories.tsx
│       └── index.tsx
├── molecules
│   └── CustomDialog
└── organizations
    └── CustomTable

3. 유형 정의

아시다시피 JavaScript는 동적 유형 언어입니다. 프로젝트가 확장되면 구성 요소와 기능 간에 전달되는 소품이 증가합니다.

유형 검사가 없으면 null 및 undefined와 같은 에지 케이스와 관련된 많은 불필요한 오류가 발생할 수 있습니다. 유형을 정의하면 코드의 가독성도 높아집니다.

가능한 경우 TypeScript로 시작하거나 TypeScript로 마이그레이션하는 것이 좋지만 정의PropTypes도 작동합니다.

4. 전역 및 특정 스타일 사용

스타일링은 프론트엔드 개발자에게 항상 큰 골칫거리입니다. 통일된 스타일과 개별 스타일을 모두 다루어야 합니다.



프로젝트에 Figma와 같은 UI 디자인이 제공되는 경우 먼저 글로벌 테마에서 스타일을 정의해 보십시오. 정의된 팔레트에서 쉽게 사용자 정의할 수 있도록 UI 라이브러리의 테마 제공자에서 정의하는 것이 좋습니다. 테마 공급자는 밝은 테마와 어두운 테마도 처리합니다.

개별 구성 요소의 스타일은 위에서 언급한 사용자 정의 구성 요소 라이브러리에 포함시키십시오. 한 구성 요소에만 해당되는 경우 해당 구성 요소 아래의 스타일 파일에 포함합니다.

경험 법칙은 재사용에 필요한 최상위 수준의 스타일을 포함하는 것입니다.

5. 페이지 폴더를 경로와 동기화

이전에는 페이지와 구성 요소 폴더를 상당히 엉망으로 만들어 한 폴더에만 두 개를 유지했습니다.

그런 다음 페이지 폴더를 경로와 동기화하여 구성하는 것이 더 낫다는 것을 배웠습니다. 이렇게 하면 다음과 같이 다른 개발자가 웹 사이트 구조를 이해할 수 있도록 가독성이 높아집니다.

pages
├── events
│   ├── index.tsx
│   └── event
│       ├── index.tsx
└── user
    └── index.tsx

events는 /events에 해당하고 event는 /events/:id에 해당합니다.

구성 요소가 사용되는 페이지에 구성 요소를 대응시키기 위해 구성 요소 폴더에 대해 동일한 구조를 사용하고 있습니다. 그러나 각 페이지 아래에 /components 폴더가 있고 다른 용도로 구성 요소 폴더를 만들 수도 있습니다.


이것은 규모에 맞게 React 프로젝트를 계획하는 나의 모범 사례이며 모두가 자신의 방식을 가지고 있습니다. 이러한 모범 사례를 결론 짓는 두 가지 경험 법칙은 다음과 같습니다.

1. 분리 및 재사용
2. 가독성을 위해 구성

즐거운 코딩하세요! 🚀