React 코딩 스타일

*.tsx 파일명

---

컴포넌트, 페이지 이름은 PascalCase 형식을 사용합니다.

나쁨

reservationCard.tsx
reservation-card.tsx

좋음

// PascalCase 사용
ReservationCard.tsx

참조 이름 명

---

컴포넌트의 참조명은 PascalCase 형식을 사용합니다.
변수명, 인스턴스명은 camelCase를 사용합니다.

나쁨

import reservationCard from './ReservationCard';
const ReservationItem = <ReservationCard />;

좋음

// PascalCase 사용(컴포넌트)
import ReservationCard from './ReservationCard';
// camelCase 사용(인스턴스)
const reservationItem = <ReservationCard />;

디렉토리 루트 요소 이름 지정

---

디렉토리 루트 파일은 index.tsx로 지정하고 참조명은 해당 디렉토리명으로 지정합니다.

나쁨

import Footer from './Footer/Footer';
import Footer from './Footer/index';

좋음

import Footer from './Footer';

jsx구문의 속성 정렬

---

다음과 같은 ESLint의 정렬 규칙을 따릅니다.

나쁨

<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />

좋음

<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>

Props 이름

---

prop 이름은 항상 camelCase를 사용합니다.
prop의 값이 컴포넌트명 일때는 PascalCase를 사용합니다.

나쁨

<Foo
  UserName="hello"
  phone_number={12345678}
/>

좋음

<Foo
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>

Refs 할당

---

ref에는 항상 콜백함수를 사용합니다.

나쁨

<Foo
  ref="myRef"
/>

좋음

<Foo
  ref={(ref) => { this.myRef = ref; }}
/>

jsx 엘리먼트 괄호

---

jsx 엘리먼트가 두 줄 이상일 경우에는 괄호로 묶습니다.

나쁨

render() {
  return <MyComponent variant="long body" foo="bar">
           <MyChild />
         </MyComponent>;
}

좋음

render() {
  return (
    <MyComponent variant="long body" foo="bar">
      <MyChild />
    </MyComponent>
  );
}