1. Components 이름은 Pascal case를 사용합니다.
- Good :
function Button = ...
- Bad :
function button = ...
2. 변수 및 함수명에 줄임말 사용은 최대한 지양합니다.
- Good:
getValue(),addString()
- Bad:
getVal(),addStr()
3. Component는 함수 표현식 + 화살표 함수로 작성합니다.
- Good:
const Button = () => {}
- Bad:
functon Button(),const Button = function(){}
4. 각 파일은 Import / Interface(type) / main / styled / export 순으로 작성합니다.
5. styled component에 인라인 스타일을 넣는 것은 최대한 지양합니다.
- Bad :
<StyledButton style={{...}}>
- styled-component로 최대한 처리
6. prop에 명시하는 이벤트는 on~, 핸들러 함수를 정의할 때 는 handle 접두사를 사용하고 이벤트의 이름을 사용합니다.
- Good:
<StyledButton onClick={handleClick} />
- Bad:
<StyledButton onClick={somethingElse} />
7. 동일한 이벤트를 다루는 핸들러가 여러개 존재 할 경우 정확히 어떤 컴포넌트에 할당되는 이벤트인지 명시해서 구분합니다. (handle + 컴포넌트 + 이벤트)
8. 변수 선언영역, 함수 사이, return 영역들 사이에 empty line으로 구분합니다.
9. 문자열, 숫자는 항상 상수로 사용합니다.
10. 상수명 컨벤션
11. 컴포넌트 props의 interface 명은 Props로 합니다
- Good:
interface Props {}
- Bad:
interface InputProps{}