네이밍
컴포넌트명은 파스칼 케이스 ex) Header, Button
변수명, 함수명은 카멜 케이스 ex) isLogin
타입
파스칼 케이스로 Prefix 없이 정의한다.
Props는 해당 타입이 사용되는 파일 내부에 정의한다.
핸들러 함수
Prefix로
handle
을 사용한다.핸들러 함수의 타입은
React.ChangeEventHandler<HTMLInputElement>
와 같은 형태로 통일한다.Prettier
코드 포맷팅을 위한 Prettier 설정은 아래와 같다.
Lint
코드 린팅을 위한 ESLint 설정은 아래와 같다.
만약 새로운 룰이 필요하거나 기존 룰 중에서 사용하지 않아야 할 룰이 있는 경우
1. 추가하거나 삭제해야 하는 이유를 노션에 문서로 정리한다.
2. 정리한 내용을 바탕으로 팀원들과 상의 후 결정한다.
함수 정의
function 키워드 대신 화살표 함수를 사용한 함수 표현식으로 함수를 정의한다.
Container? Wrapper?
단일 요소를 감싸야 한다면
Wrapper
2개 이상의 요소를 감싸야 한다면
Container