[0923] Airbnb React Style Guide 요약

1. 1개 파일 당 1개 컴포넌트만
2. 내부 state/ref가
   • 있는 경우, Class extends React.Component
   • 없는 경우, normal function (arrow function 놉)
3. mixin 사용 X
4. Naming
   • File name: PascalCase
   • Component: PascalCase
   • instances: camelCase
   • props: camelCase (React Component가 값인 경우 PascalCase)
   • directory name === component name인 경우, index.jsx 사용
   • ✅ Higher order component naming
5. Quotes
   • jsx attribute: ""
   • 기타(style): ''
6. Spacing
   • <Foo bar={baz} />
7. img props
   • alt 필수 또는 role='presentation'
   • alt에 image, photo, picture 넣지 않기 (스크린리더가 이미 img를 읽으면 이미지인 줄 앎)
     (ex. Picture of me waving hello → Me waving hello)
8. role은 태그의 역할을 알려줌
   • tab, tablets, banner, button, group
   • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
9. map 함수 등에서 index를 key 값으로 할당하지 말기
   • item의 순서가 바뀔 수 있음
10. none-required인 경우, defaultProps를 항상 정의
11. spread props를 절제하여 사용
    • 불필요한 props를 components에 내려줄 수 있음
    • 다음과 같이 불필요한 것을 거를 수 있음
    • const { irrelevantProp, ...relevantProps } = this.props;
12. 항상 Ref callback 사용

<Foo ref=‘myRef’ /> (x)
<Foo
	ref={(ref) => { this.myRef = ref; }}
/> (o)

13. jsx가 1줄 이상일 때 ()로 감싸기
14. children 없을 때 self-close tag 사용

+) aria-label : 태그가 가지고 있는 의미를 적어주는 이름표

참고자료

https://github.com/airbnb/javascript/tree/master/react#basic-rules
https://velog.io/@mementomori/Airbnb-ReactJSX-Style-Guide