[React] class형 컴포넌트 VS function형 컴포넌트

• 과거에는 클래스형 컴포넌트를 주로 사용
• 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장

---

컴포넌트

• 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 기능
• 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행

Class형 컴포넌트

• state 기능 및 라이프 사이클 기증을 사용할 수 있고, 임의 메서드를 정의할 수 있다.
• render함수가 꼭 있어야 한다.

Function형 컴포넌트

• 클래스형 컴포넌트보다 선언하기 좀더 편리
• 메모리 자원을 덜 사용한다는 장점
• 과거에는 함수형 컴포넌트에서 state와 라이프 사이클 API를 사용할 수 없었지만, → 리액트 훅이 도입되면서 단점이 해결됨
• 일반적인 함수 선언 방식과 / 화살표 함수(arrow function) 방식 모두 가능
  • 화살표 함수의 경우 함수를 파라미터로 전달할 때 유용

함수형 컴포넌트든 클래스형 컴포넌트든 state를 직접 조작하는 것이 아닌, setState나 useState와 같은 세터 함수를 반드시 사용하여 조작해야 한다.