[React] 코딩 컨벤션 정리

서론

회사에서 React로 프로젝트를 개발하고 있다.

나도 직접 개발하지만 팀이 나눠져있고, 팀별로 개발자들이 따로 존재한다.

 

현재 중심을 잡아줄 파트장은 없어 내가 대행중인데 

각 팀별로 개발자들이 정규직인 팀도 있고, 프리랜서 개발자인 팀도 있다.

 

프리랜서 개발자들이 정해진 기간동안 개발을 맡아 진행할 경우

새로 올 때마다 우리 코드에 대한 인수인계를 해주어야 하는데

매번 1:1로 그동안 작성되어있던 코드와 가이드를 인수인계해주기 쉽지 않다.

 

심지어 가이드도 표면적으로 있긴 하나 잘 지켜지진 않았다.

이유는 각자의 코딩 스타일이 다르고,

만들어진 가이드가 뇌피셜로 만들어졌을 가능성이 크기 때문에 웹에 특화된 가이드가 필요했다.

(특히 웹 전문 개발자가 만든것이 아닌 넓게 여러 플랫폼을 접해봤던 개발자가 만들었기 때문)

 

나는 Web이라는 플랫폼, React라는 프레임워크에 맞춰진 가이드가 필요했다.

 

구글링을 해보니 코딩 컨벤션이 잘 정리된 레퍼런스가 많았다.

그를 정리해보고 따를 것들은 회사로 가져가 가이드를 보완하려 한다.

 

 

네이밍 컨벤션

• Components
  • PascalCase
  • 예시) HomeBanner.js, LoginInput.js
• Non-components
  • camelCase
  • 예시) uploadImage.js, getUsers.js
• Unit test
  
  • 테스트 대상 파일명과 동일하게 작성하기
  • 예시) HomeBanner.js => HomeBanner.test.js
• 속성명
  • camelCase
  • 예시)

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

• 변수명
  • camelCase
  • 예시) userName, boardImage
• inline style
  • camelCase
  • 웬만하면 inline style은 사용하지 않고 Styled Component 사용하기

<div
	style={{
		fontSize: '1rem',
		color: '#000000'
	}}
></div>

 

버그 방지

• optional chaining 연산자 사용하기
• object?.prop
• 전달된 매개변수가 유효한지 확인하기 위해 guard pattern/prop types/typescript를 사용하기
• 함수 생성시 외부 데이터 직접 받지 않고 파라미터로 받기
• 배포시 console.log() 모두 지우기
• props는 읽기 전용! 직접 수정하지 않기

 

아키텍쳐 & 클린코드

• 중복을 피하라
  • utility 파일을 만들어라
• 상태를 관리하는 Container Component와 UI를 보여주는 Presentation Component를 분리하라
• 각 도메인별로 index.js 파일을 만들어라
  • 반복되는 import를 줄여준다.
• 한 파일에는 한 React Component만 만들기
• 컴포넌트 안에서는 웬만하면 함수 선언하지 않기
• 부모 컴포넌트가 아닌 다른 컴포넌트의 함수 사용하지 않기
• 불필요한 주석 사용하지 않기
  • 주석처리된 코드는 커밋하지 않고 삭제하기
• 화면보다 긴 코드는 더 작게 나누기 

 

ES6

• spread 연산자 사용하기
  • ...
• 구조 분해 할당을 사용하기
• let과 const만 사용하기
  • var 사용금지
  • var는 재선언이 가능하고, hoisting이 가능하여 다른 함수에서 동일한 변수를 생성하여 값이 침범되는 등의 버그를 발생시킬 수 있다.
• 되도록 화살표 함수를 사용하기
• 직접 null을 체크하기 보다 optional chaining 연산자 (?.)를 사용하기

 

테스팅

• 테스트 작성하기
• 적정 수준의 테스트 커버리지 유지하기
• 하나의 테스트 파일에서 하나만 테스트 하기
• 테스트 코드안에서 로직을 사용하지 않기
• 테스트 클래스는 하나의 클래스만 테스트 하기
• 네트워크, 데이터 베이스와 직접 통신하지말고 가짜 함수 사용하기

 

CSS

• inline css 사용하지 않기

 

 

대부분의 회사에서는 이 규칙을 지켜 코드를 짠다고 한다.

이를 무조건적으로 따르기 보다는 우리 회사 프로젝트에 맞게, 개발팀에 맞게 차용하여 사용해야겠다.

 

다음주 개발챕터 회의 아젠다로 들고가야지

 

출처 : https://3-stack.tistory.com/53

[react] 리액트 코딩 컨벤션