1. 1개 파일에는 1개 컴포넌트만!
2. state나 refs가 없는 컴포넌트의 경우는 일반 함수식으로 작성
- 클래스형이나 arrow function X
3. Mixins를 되도록 사용하지 말 것
- 잠재적인 dependencies를 도입하고, 이는 name 충돌이나 snowballing 복잡성을 일으킴/ 대부분 Mixins을 사용하는 경우는 컴포넌트s나 HOC, utility modules로 해결 가능
4. Naming
- File name: PascalCase 사용 (CamelCase와 유사, 첫 자가 대문자 원칙 차이)
- Reference name: 컴포넌트는 PascalCase, instances은 camelCase 사용
- 컴포넌트는 파일이름과 동일하게
- props name : camelCase 사용
5. JSK attributes는 ""로, JS attributes는 '로 사용
: 왜냐하면, 일반 HTML attributes도 ""를 사용하기 때문 (JSK는 HTML의 mirror)
6. 명확하게 속성 값이 true이면, 명시적으로 true를 적지 않을 것
7. <img>의 alt props에 "image"나 "photo", "picture"가 들어가지 않도록 할 것 (스크린리더가 이미 img를 읽으면 이미지인줄 앎)
8. map 함수 등에서 index 인자를 key의 값으로 할당하지 말 것
9. non-required props에 대한 명확한 defaultProps를 항상 정의 할 것
: 왜냐하면 코드 읽는 사람이 해당 값들을 추측할 필요가 없고, type checks를 생략할 수 있게 할 수 있음
10. spread props를 절제하여 사용할 것
: 그렇지 않으면, 불필요한 props를 components에 내려줄 수 있으므로
11. Refs
: 항상 ref callbacks를 사용할 것
<Foo
ref="myRef"
/>
// good
<Foo
ref={(ref) => { this.myRef = ref; }}
/>12. children이 없으면 self-close tags 사용할 것
21c Carpenter