[react] react 코딩 컨벤션 (Coding Convention)

길현민·2022년 8월 1일

React

목록 보기

16/28

import 순서 수정! 일반적인 convention을 따라 순서만 잘 지켜주셔도 가독성이 좋아집니다. 아래 순서 참고해주세요.

React → Library(Package) → Component → 변수 / 이미지 → css 파일(scss 파일)

1. NAMING CONVENTIONS

components 이름은 Pascal case로 작성해라.
pascal case : 첫 단어를 대문자로 시작하는 표기법
Non-components 이름은 Camel case로 작성해라.
Camel case : 띄어쓰기 대신 대문자로 단어를 구분하는 표기 방식
Unit test 파일명은 대상 파일명과 동일하게 작성해라.
속성명은 Camel case로 작성해라.
inline 스타일은 Camel case로 작성해라.

2. BUG AVOIDANCE

null 또는 undefined일 수 있는 값은 optional chaining 연산자 (?.)를 사용한다.
전달된 매개변수가 유효한지 확인하기 위해 guard pattern/prop types/typescript를 사용한다.
side-effects를 피하기 위해 외부 데이터를 props로 받아서 사용한다.
console.log()를 모두 지운다.
props는 읽기 전용으로 사용하며, 직접 수정하지 않는다.

3. ARCHITECTURE & CLEAN CODE

유틸리티 파일을 만들어 중복된 코드를 피한다.

//common.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

//variables.scss
@mixin flex($justify: flex-start, $align: flex-start, $direction: row) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-direction: $direction;
}

//signUp
@import '../../styles/variables.scss';
.signUPageWrapper {
  .signUPBox {
    @include flex(none, none, column);
    }
 }

4. ES6

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

const handleChangestate = e => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };
  const {name, value} = e.target 과 같이 사용하면 조금 더 간단하게 사용할 수 있습니다!