Facebook에서는 수천 개의 React 컴포넌트를 사용하지만, 컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례를 아직 찾지 못했습니다.

props와 합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징하는데 필요한 모든 유연성을 제공합니다. 컴포넌트가 원시 타입의 값, React 엘리먼트 혹은 함수 등 어떠한 props도 받을 수 있다는 것을 기억하세요.

UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면, 별도의 JavaScript 모듈로 분리하는 것이 좋습니다. 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있습니다. 상속받을 필요 없이 말이죠.

• syntax 구문에서 가장 큰 차이점을 가짐

function

• createElement로 이용

1. 함수 컴포넌트는 읽기 쉽고 테스트 하기 쉽다
   • 기본 JS 함수로 이루어져 있고
   • state(상태)가 없고 라이프사이클 훅에 의존할 필요가 없음
2. 더 적은 코드량
3. 클래스의 setState에 접근할 수 없는 경우 이에 대한 생각을 많이 해야함
   • 컨테이너 및 프레젠이션 구성 요소를 분리하는 것이 더 쉬워짐

class

• 매번 this.props를 이용한 참조를 해야함

class ClassComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }
}