[react] react 코딩 컨벤션

최근 면접을 보면서 나의 코딩 스타일에 대해 생각하게 되었다.
나는 많은 인강을 보면서 react를 독학한 케이스인데 아무래도 인강 강사님의 코드 스타일을 따라가게 되었고 무의식적으로 그렇게 코딩을 했었다.
면접관님이 코딩스타일은 다 다르지만 내가 사용한 코딩스타일은 값과 코드를 확인하기 위해 여러군데를 살펴봐야 하기때문에 본인은 선호하는 방식이 아니라고 하셨다. (솔직히 생각해본적이 없어서 충격 😱)

신규 서비스를 개발하는 경우도 있지만 대부분의 개발은 기존코드를 유지보수 하는 경우가 많다. 이전 개발자가 코딩했던 스타일이 지극히 개인적이라면 어떻겠는가? 또는 동료 개발자가 내 스타일데로 코딩한 코드를 이해하지 못한다면? 개발자들은 자신이 코딩했던 코드도 까먹는 경우가 꽤 많다. 저 당시에 내가 왜 저렇게 코딩 했지?하는 경우를 많이 봤기 때문에 더더욱 개발자들 사이의 규칙이 중요한 것 같다.

현업에서 혼자 개발하는 개발자는 드물다. 그렇기 때문에 협업을 위한 코딩 스타일 규칙은 중요하다는 생각이 들었다.

코딩 컨벤션이란?

코딩 컨벤션은 협업 시 유지보수 및 가독성, 코드 이해를 위해 지켜지는 개발자들 사이의 규칙이다.
효율적이고 관리하기 쉬운 코드를 만들기 위해(유지보수) 효율적으로 규칙을 정해야 한다.

*사용하는 이유?

1. 의미있는 코드 : 웹표준과 접근성, 크로스 브라우징 등에 맞춘 의미있는 코드
2. 유지보수가 용이한 코드 : 시간과 비용 절약을 위해 타인이 봤을때도 금방 이해하고 수정하기 쉽게끔 작성
3. 일관된 코드 : 모든 개발자가 각자의 규칙을 가지고 있기때문에 하나의 규칙을 정해 일관된 코드로 작성

react 코딩컨벤션

1. NAMING CONVENTIONS

1. components 이름은 Pascal case로 작성해라.
   pascal case : 첫 단어를 대문자로 시작하는 표기법

   Header.js Footer.jsx MainBanner.js BlogList.jsx

2. Non-components 이름은 Camel case로 작성해라.
   Camel case : 띄어쓰기 대신 대문자로 단어를 구분하는 표기 방식

   myUtilityFile.js cookieHelper.js fetchApi.js

3. Unit test 파일명은 대상 파일명과 동일하게 작성해라.

   MainBanner.js MainBanner.test.js BlogList.js BlogList.test.js

4. 속성명은 Camel case로 작성해라.

   className
   <div className=""></div>
   
   onClick, onSubmit
   <div onClick="{}" onSubmit="{}"></div>

5. inline 스타일은 Camel case로 작성해라.

   <div style={{ fontSize: '1rem', fontWeight: '700' }}></div>

   
   

2. BUG AVOIDANCE

1. null 또는 undefined일 수 있는 값은 optional chaining 연산자 (?.)를 사용한다.

   obj?.prop;
   obj?.[expr];
   arr?.[index];
   func?.(args);

2. 전달된 매개변수가 유효한지 확인하기 위해 guard pattern/prop types/typescript를 사용한다.
3. side-effects를 피하기 위해 외부 데이터를 props로 받아서 사용한다.
4. console.log()를 모두 지운다.
5. props는 읽기 전용으로 사용하며, 직접 수정하지 않는다.
   
   

3. ARCHITECTURE & CLEAN CODE

1. 유틸리티 파일을 만들어 중복된 코드를 피한다.
2. Presentational 컴포넌트와 Container 컴포넌트를 분리하여 사용한다. Container 컴포넌트와 Presentational 컴포넌트
3. 고차 컴포넌트(Higher Order Components, HOC)는 적절하게 사용한다.
4. JS, test, css로 파일을 분리한다.
5. 반복되어 import되는 이름을 줄이기 위해 각 폴더에 index.js 파일을 만든다.

import { Nav } from './Nav.js';
import { CookieBanner } from './CookieBanner.js';

export { Nav, CookieBanner };

6. 하나의 파일에 하나의 React component만 만든다.
7. 가능하다면 컴포넌트 안에서 함수를 생성하지 않는다.
8. 부모 컴포넌트가 아닌 다른 컴포넌트의 함수를 사용하지 않는다. (의존성 역전을 피한다.)
9. 불필요한 주석을 사용하지 않는다.
10. 현재 화면보다 긴 코드는 더 작은 단위의 코드로 리팩토링 한다.
11. 주석 처리된 코드는 커밋하지 말고 삭제한다.
    
    

4. ES6

1. spread 연산자를 사용한다.
2. 구조 분해 할당을 사용한다.
3. let과 const만 사용한다. (var 사용금지)
4. 되도록 화살표 함수를 사용한다.
5. 직접 null을 체크하기 보다 optional chaining 연산자 (?.)를 사용한다.
   
   

5. TESTING

1. 테스트를 작성한다.
2. 적정 수준의 테스트 커버리지를 유지한다.
3. 하나의 테스트 파일에서 하나만 테스트 한다.
4. 테스트 코드안에서 로직을 사용하지 않는다.
5. 테스트 클래슽는 하나의 클래스만 테스트 한다.
6. 네트워크, 데이터 베이스와 직접 통신하지말고 가짜 함수를 사용한다.
   
   

6. CSS

1. inline css를 사용하지 않는다.
2. 명명 규칙을 지킨다. (네이밍 컨벤션 - bem, SUIT 등)
   
   

-참고