[React] React 코딩 컨벤션 정리

1. 코딩 컨벤션 (Coding Convention) 이란?

읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다.

여러 개발자들이 협업하는 과정에서 각각의 개발자들은 서로 다른 코딩 스타일을 가지고 있다. 조건문과 함수를 통해 예를 들어보겠다.

// if문
if (true) return true;
if (true) {
	return true;
}

// 화살표 함수
const foo = () => "Hello World";
const foo = () => {
	return "Hello World";
}

위의 코드처럼 다양한 방식으로 코드를 작성할 수 있다. 특히 자바스크립트는 언어 특성상 다른 언어에 비해 유연한 구조를 가지고 있기 때문에 (자유도가 높음) 개발자간 코드의 의도를 파악하기 어려워질 수 있다.

 

우리는 보통 혼자가 아닌 여러 개발자들과 협업해서 작업을 하게 된다. 협업을 할 때 코딩 스타일 규약을 정해놓고 작업을 한다면 내 코드를 다른 개발자가 보더라도 쉽고 빠르게 이해할 수 있어 유지보수 및 가독성이 좋아질 수 있다. 

 

나는 꼭 협업할 때만 코딩컨벤션을 정해야 한다고 생각하지 않는다. 내가 작성한 코드도 몇 달만에 보면 이해가 안 될 때가 많기 때문이다... 그래서 개인 프로젝트를 진행할 때도 코딩 컨벤션을 정하고 시작한다.

 

이제 내가 주로 사용하는 간단한 코딩 컨벤션을 작성하려고 한다. 추후 계속 수정이 될 수 있다.

2. 코딩 컨벤션 작성하기

ESLint, Prettier 사용

• airbnb style guide를 사용한다.
• ESLint, Prettier에 대한 설명은 다른 게시글에서 확인할 수 있다.

2022.06.23 - [node.js] - [node.js] node.js + typescript 실행환경 세팅하기

[node.js] node.js + typescript 실행환경 세팅하기

문장 종료

• 반드시 세미콜론을 사용

명명 규칙

• 상수는 영문 대문자, 스네이크 표기법을 사용

const NAME_ROLE;

• 변수 및 함수는 카멜케이스를 사용

// 배열: 복수형 이름으로 사용
const datas = [];

// 정규표현식: 'r'로 시작
const = rName = /.*/;

// 이벤트 핸들러: 'on'으로 시작
const onClick = () => {};
const onChange = () => {};

// 반환 값이 불린인 경우: 'is'로 시작
const isLoading = false;

// Fetch함수: method(get, post, put, del)로 시작
const getEnginList = () => {...}

블록 구문

• 한 줄짜리 블록일 경우라도 {}를 생략하지 않고, 명확히 줄 바꿈 하여 사용한다

// bad
if(true) return 'hello'

// good
if(true){
  return 'hello'
}

함수

• 함수는 함수 표현식을 사용하며, 화살표 함수를 사용한다.

// Bad
function fnName() {};
[1,2,3].map(function(x){
    retrun {};
})

// Good
const fnName = () => {};
[1,2,3].map(x => x);

• 바로 return 하는 경우

// bad
const foo = () => { return "bar"; }

// good
const foo = () => "bar";

주석

• Comment Anchors를 사용한다.
  • VS code의 Extension에서 앵커를 다운 받는다.
  • 주석을 좀 더 직관적으로 볼 수 있다.

태그 네이밍

• Styled-component태그 생성 시 아래 네이밍 규칙을 준수하여 의미 전달을 명확하게 한다.
• 태그명이 길어지더라도 의미 전달의 명확성에 목적을 두어 작성한다.
• 전체 영역: Container
• 영역의 묶음: {Name}Area
• 의미없는 태그: <>

<Container>
  <ContentsArea>
    <Contents>...</Contents>
    <Contents>...</Contents>
  </ContentsArea>
</Container>

폴더 네이밍

• 카멜 케이스를 기본으로 하며, 컴포넌트 폴더일 경우에만 파스칼 케이스로 사용한다.

// 카멜 케이스
camelCase
// 파스칼 케이스
PascalCase

파일 네이밍

• 컴포넌트일 경우만 .jsx 확장자를 사용한다. (그 외에는 .js)
• customHook을 사용하는 경우 : use + 함수명

이벤트 핸들러 네이밍

• Props의 경우: on (onClick 등등)
• 함수인 경우: handle (handleClick 등등)

<MyComponent onclick={this.handleClick} />