화살표 함수 보다는 일반 함수 방식으로 작성한다

// bad
const Listing = () => {
	<div>{hello}</div>
}

// good
function Listing({ hello }){
	return <div>{hello}</div>
}

익명함수의 형태이므로 함수의 이름을 추론해야 하기 때문에 불편하다

Mixin은 사용하지 않는다

Mixins Considered Harmful - React Blog

Mixin은 묵시적인 의존성을 야기하고, 이름 충돌을 야기하며 코드가 훨씬 복잡해질 수 있다.

믹스인을 사용하는 대부분의 경우는 컴포넌트를 더 나은 방법으로 리팩토링하거나 고차 컴포넌트(HOC)로 바꾸거나 혹은 유틸리티 모듈로 해결할 수 있다.

컴포넌트 명명 방식은 다음과 같은 규칙을 지킨다

• 확장자: 다른 jypescript 파일과 구분하기 위해 .jsx or .tsx 를 사용한다.

• 파일 이름: Pascal case 방식을 사용한다 (ex: ReservationCard.jsx)

• 참조 값 이름: 인스턴스는 카멜 형식으로, 리액트 컴포넌트는 파스칼 형식의 이름을 사용한다./

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

• 컴포넌트 이름: 파일 이름과 동일하게 사용한다. 예를 들어, ReservationCard.jsx 라는 파일 안에는 ResvervationCard 라는 이름의 컴포넌트가 있어야 한다. 하지만 폴더 내 루트 컴포넌트의 경우에는, 파일 이름을 index.jsx로 작성하고, 폴더의 이름을 컴포넌트의 이름으로 작성한다.

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

• 상위 컴포넌트 이름: 상위 컴포넌트의 displayName 속성 값과 하위 컴포넌트의 displayName 속성 값에 활용하여 새롭게 만들어진 컴포넌트의 이름을 만든다. 예를 들어, 상위 컴포넌트 withFoo()에서 Bar라는 하위 컴포넌트가 이자로 넘어왔을 때, 생성되는 컴포넌트의 displayName 속성 값은 withFoo(Bar)가 된다.

  컴포넌트의 displayName 속성은 개발자 도구나 에러 메세지를 확인하기 위해 사용된다. 이 값을 확실하게 넣어줘야 사람들이 이러한 문제를 겪거나 컴포넌트 간의 관계 파악을 할 때 도움된다.

  // bad
  export default function withFoo(WrappedComponent) {
  	return function WithFoo(props) {
  		return <WrappedComponent {...props} foo />;
  	}
  }
  
  // good
  export default function withFoo(WrappedComponent) {
  	function WithFoo(props) {
  		return <WrappedComponent {...props} foo />
  	}
  	const wrappedComponentName = WrappedComponent.displayName
  		|| WrappedComponent.name
  		|| 'Component';
  
  	WithFoo.displayName = `withFoo(${wrappedComponentName})`;
  	return WithFoo
  }