React를 어떻게 해야 좋은 방법으로 사용할 수 있을지 궁금하여 Google에서 검색해 보고 간단하게 정리해보았습니다.

Reference :

• Top 8 React Js Best Practices to Follow in the Year 2021
• React best practices-React at scale (Part 2)

1. 재사용성

하나의 기능은 하나의 컴포넌트(Component)를 의미합니다. 이를 통하여 컴포넌트의 재사용성을 높일 수 있습니다.
재사용성을 높이게 되면, 개발자가 기능에 대한 새로운 컴포넌트를 만드는 일이 줄어들게 됩니다.
예를 들어 아이콘과 함께 보여주는 버튼 컴포넌트를 하나 만들게 되면, 다른 컴포넌트에서 해당 컴포넌트를재사용하여 사용이 가능합니다.
만약, 같은 기능을 하는 컴포넌트가 HomeButton.tsx, MenuButton.tsx, ModalButton.tsx와 같이 여러개가 존재한다면 고쳐야 합니다.
되도록이면 여러 위치에서 사용할 수 있는 컴포넌트를 만들어야 하며, 추상적이지만 지나치게 복잡하지 않게 작성해야 합니다.
또한 어떤 컴포넌트가 거대해져서 유지관리가 어려워지게 된다면, 이를 더 작은 컴포넌트로 분할해야 합니다.

2. 기능별로 작은 컴포넌트 만들기

React는 여러 컴포넌트들을 모아 거대한 컴포넌트를 만들 수 있게 해주는 기술입니다.
컴포넌트를 설계할 수 있는 가장 좋은 방법은 컴포넌트를 작게 만들어 각 컴포넌트가 하나의 기능에 해당하도록 만드는 것입니다.
기본적으로 한 컴포넌트는 페이지의 특정 부분을 렌더링 하거나 속성을 변경합니다.
전체적으로 개발자는 여러 가지의 컴포넌트를 가질 수 있으며, 예상한 결과를 만들기 위해 이 컴포넌트 들을 재결합할 수 있습니다.

3. JavaScript(TypeScript)로 CSS 작성하기

프론트엔드 개발자가 작업을 시작할 때, 가장 일반적인 방법 중 하나는 모든 CSS 스타일을 하나의 SCSS 파일에 넣는 것입니다. 이 과정에서 전역 접두사를 사용하여 가능한 충돌을 방지합니다. 그러나 프로젝트가확장되면 이 솔루션이 좋은 방법이 않을 수 있습니다.
따라서 개발자는 JavaScript(TypeScript)로 CSS를 작성해야 하며, 라이브러리를 사용해야 합니다. 대표적으로 EmotionJS는 JavaScript와 TypeScript 라이브러리에서가장 널리 사용되는 CSS 라이브러리 입니다.

4. 중복코드 정리하기

아마 대부분의 개발자들은 최대한 간결하게 코드를 작성하려고 노력할 것입니다. React도 마찬가지입니다. 여기서도 개발자는 코드를 정확하고 간략하게 작성해야 합니다.
코드 중복을 피하는 한가지 방법은 DRY(Don't Repeat Yourself) 입니다. 이것 또한 위에서 설명한 '재사용성'과 같은 내용입니다. 중복으로 사용되는 코드는 별도의 컴포넌트로 분리하여 중복코드가 생기지 않도록 해야 합니다.

5. 컴포넌트 이름을 지정하는 방법

함수 이름을 따서 컴포넌트의 이름을 지정하는 것이 가장 좋은 아이디어 중 하나입니다. 개발자가 컴포넌트를 쉽게 알아볼 수 있도록 도와줍니다.
예를 들어, ProductTable은 컴포넌트가 수행하는 작업을 명확하게 보여주는 이름입니다. 하지만, 이와 같이 개발자가 코드 기반으로 컴포넌트의 이름을 지정하면 나중에 혼동을 일으킬 수 있으므로 주의해야 합니다.
다른 안 좋은 예시를 들자면 사용자, 작성자 또는 댓글에 나오는 사용자 사진에 대한 컴포넌트의 이름을 AuthorAvatar로 지정하게 된다면 컴포넌트를 Author에서 사용하는 Avatar로 제한하게 됩니다. 이럴때는 Avatar로 지정하는 것이 좋습니다.

6. 컴포넌트의 이름은 대문자로 시작해야 합니다

개발자가 JSX를 사용하는 경우 생성하는 컴포넌트의 이름은 대문자로 시작해야 합니다. 예를 들어 개발자는컴포넌트의 이름을 selectbutton이 아닌 SelectButton으로 지정해야 합니다. 이것은 JSX가 모든 기본 HTML 태그와 다르게 식별되도록 하는데 필수적입니다.

7. 하나의 폴더에는 유사한 컴포넌트만 넣습니다

컴포넌트와 관련된 것들은 하나의 폴더에 보관해야 합니다. 특정 컴포넌트에서 사용하는 작은 컴포넌트가있다는 것은 작은 컴포넌트들도 하나의 폴더에 함께 보관해야 함을 의미합니다. 이것은 React 컴포넌트를이해하기 위해 따라야 하는 계층 구조입니다.
큰 컴포넌트도 어딘가에 위치하는 폴더에 있으며, 이러한 큰 컴포넌트에서 사용되는 작은 컴포넌트들은 그폴더의 하위 폴더로 나뉘게 됩니다.
예를 들어 Form 컴포넌트에는 아이콘, 텍스트, 이미지과 같은 부분들이 있으며, Form 컴포넌트와 관련된 기타 하위 컴포넌트들은 동일한 폴더에 있어야 합니다.
이렇게 함으로써 개발자는 코드를 다른 프로젝트로 쉽게 옮기거나 코드를 쉽게 수정할 수 있습니다.

8. React 프로젝트의 폴더 구조

좋은 폴더 구조를 찾는 것은 어려운 작업입니다. React 프로젝트의 폴더를 구성하는 방법에는 여러 가지가있습니다. 어떤 것을 사용할지는 개발자가 결정해야 합니다.
하지만, 폴더 구조를 보다 견고하게 만들기 위해 따를 수 있는 몇 가지 팁이 있습니다:

1. 폴더 및 파일명은 일관되고 예측이 가능해야 합니다. 폴더 구조 패턴에 따라서 유사한 컴포넌트를 배치해야 합니다.
   예를 들어, 게시물을 작성하는 양식을 표시하는 컴포넌트와 댓글을 작성하는 양식을 표시하는 컴포넌트는 각각 /components/Post/Form/Create 및 /components/Comment/Form/Create에 있을 수 있습니다.
   마찬가지로 모든 페이지에 왼쪽에 렌더링 하는 컴포넌트가 있는 경우에는 /components/Page/Home/Left 및 /components/Page/Groups/Left와 같은 패턴을 가질 수 있습니다.
   기본적으로 새 컴포넌트를 생성할 때마다 잘 정의된 패턴을 기반으로 컴포넌트를 생성할 위치를 알아야 합니다.

2. 관련 파일(컴포넌트, 테스트 코드, 스타일, 타입)은 모두 하나의 폴더에 보관해야 합니다.
   예를 들어 Story.tsx(스토리북을 사용하는 경우)와 같은 다른 파일을 추가하려는 경우에는 동일한 폴더에 추가할 수 있습니다. 이와 같이 매우 간편하게 확장할 수 있습니다.
   이렇게 관련 파일을 하나의 폴더에 넣게 되면, 폴더와 모든 리소스를 쉽게 이동하거나 삭제할 수 있습니다.

3. Button, Form, List와 같이 기본적인 UI에서 사용되는 컴포넌트 들은 별도의 폴더에 보관해야 합니다.
   이 방법은 좋은 분리 방법이며, 분리된 작업을 쉽게 할 수 있습니다. 일부 개발자는 이 폴더에만 집중을할 수 있습니다.
   또한 다른 프로젝트에서 사용하기 위해 패키지를 만들거나 이러한 모든 구성요소를 스토리북의 일부로어딘가에 쉽게 게시할 수도 있습니다.

아래는 폴더 구조의 예시 입니다:

├── README.md
├── node_modules
├── package.json
├── public
├── src
│   ├── components
│   │   ├── Comment
│   │   │   ├── Form
│   │   │   │   ├── Create
│   │   │   │   └── Edit
│   │   │   └── List
│   │   ├── Post
│   │   │   ├── Form
│   │   │   │   ├── Crate
│   │   │   │   │   ├── Spec.tsx
│   │   │   │   │   ├── Types.ts
│   │   │   │   │   ├── index.tsx
│   │   │   │   │   ├── Stories.tsx
│   │   │   │   │   └── styles.scss
│   │   │   │   └── Edit
│   │   │   └── List
│   │   └── pages
│   │       ├── Groups
│   │       ├── Home
│   │       └── Posts
│   ├── constants
│   ├── core
│   │   ├── Button
│   │   ├── List
│   │   └── Table
│   ├── index.tsx
│   └── utils
└── tsconfig.json