[react] 코딩 가이드, 코드 컨벤션은 정해놓고 react 프로젝트 시작하기

코딩 가이드, 코드 컨벤션을 정해놓고 프로젝트를 시작하는 것은 필수이다.

파일 이름의 규칙은? 디렉토리명은?, 함수명은? 확장자명은?

프로젝트 내에서 일관성 있는 코드 작성은 매우 중요하다.

아직 이런 고민을 충분히 해 보지 않았다면, 이 코딩 가이드가 프로젝트를 시작할 때, 도움을 줄 것이다.

아래의 몇 가지 규칙을 권고하며, 해당 규칙에 따른 코딩 가이드를 제시합니다. * 해당 코딩 가이는 변경 및 확장이 가능하다.

1. 컴포넌트 파일명: React 컴포넌트는 대문자로 시작하는 PascalCase를 사용하여 명명합니다. 이는 컴포넌트의 인스턴스화 가능한 클래스/함수의 특성을 반영.

   • 예: Header.tsx, Sidebar.tsx, ProfilePicture.tsx

2. 서비스나 유틸리티 함수 파일명: 비 컴포넌트 파일들, 즉 일반 JavaScript/TypeScript 함수를 포함하는 파일들은 camelCase 또는 snake_case를 사용하는 경우가 많음. 이들은 보통 함수나 클래스 인스턴스가 아닌 단순 모듈이므로 소문자로 시작.

   • 예: authentication.ts, apiUtils.ts, user_service.ts
   • 우리 프로젝트에서는 "camelCase"를 사용

3. 함수명: 함수나 메서드의 이름은 항상 camelCase를 사용하여 명명합니다. 이 규칙은 JavaScript 커뮤니티에서 공식처럼 받아들여지는 방법임.

   • 예: getUserName(), calculateTotalAmount()

4. 변수명: 변수명도 camelCase를 사용하여 명명합니다. 상수는 보통 모두 대문자로 쓰고, 단어를 구분할 때는 언더스코어(_)를 사용하는 UPPER_CASE를 적용합니다.

   • 예: const MAX_COUNT = 10;
   • 예: let currentUserName = '홍길동';

5. 타입 정의 파일: 이러한 파일은 주로 전역 타입, 인터페이스, 유틸리티 타입 등 TypeScript의 타입 시스템과 관련된 코드를 포함. 일반적으로 이러한 종류의 파일은 PascalCase 또는 camelCase를 사용.

   • 예: CredentialTypes.ts, credentialTypes.ts
   • 우리 프로젝트에서는 'camelCase'를 사용
   • camelCase를 사용 이유: Credentials라는 타입을 정의하는 CredentialType.ts 파일을 생성하는 경우. 파일명은 타입 정의를 포함하고 있다는 것을 명확히 해주는 역할이 필요. 일반적으로 TypeScript 파일에서 타입 정의는 중요한 부분을 차지하기 때문에, 이를 명확히 표현하는 파일명을 사용하는 것을 권고.

6. Context 파일: React에서 컴포넌트와 유사한 방식으로 사용되는 Context입니다. 많은 개발자들이 컴포넌트를 PascalCase로 명명하는 관습을 따르고, 이러한 컨벤션은 컴포넌트와 유사한 역할을 하는 Context, Provider 등에도 적용.

   • 예: AuthContext.tsx
   • .tsx 확장자는 TypeScript가 JSX 문법을 포함하는 파일임을 나타냅니다. JSX 문법은 React 컴포넌트의 렌더링에 주로 사용되지만, TypeScript를 사용하는 React 프로젝트에서는 컴포넌트뿐만 아니라, JSX를 포함할 수 있는 모든 파일에 .tsx 확장자를 사용하는 것이 일반적.
   • AuthContext.tsx 파일이 현재는 JSX를 포함하지 않을 수 있지만, 추후 이 파일 내에서 JSX를 사용할 가능성(예: 컨텍스트 프로바이더의 값을 렌더링)을 염두에 두고 .tsx 확장자를 사용하는 경우도 있습니다.
   • 또한, 프로젝트의 일관성을 유지하기 위해, 특정 파일 유형(예: 컴포넌트, 컨텍스트 등)에 대해 일관된 파일 확장자를 사용하는 것이 혼란을 줄이고 코드베이스를 관리하기 쉽게 만듭니다.
   • 우리 프로젝트에서는 'PascalCase'를 사용