React / 클래스형 컴포넌트와 함수형 컴포넌트

리액트에서 컴포넌트를 선언하는 방식은 두가지다.

• 클래스형 컴포넌트
• 함수형 컴포넌트

 

- 클래스형 컴포넌트 예시

 

- 함수형 컴포넌트 예시

 

 

 

*클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까?

 

	특징
클래스형 컴포넌트	- state 기능 및 라이프사이클 기능을 사용할 수 있다. - 임의 메서드를 정의할 수 있다. - render함수 가 꼭 있어야한다. - render함수 내에서 보여주어야 할 JSX를 반환해야한다.
함수형 컴포넌트	- 클래스형 컴포넌트 보다 선언하기가 훨 씬 편하다. - 클래스형 컴포넌트보다 메모리자원을 덜 사용한다. - 프로젝트 완성 후 빌드하여 배포할때 클래스형 컴포넌트보다 결과물의 파일크기가 작다. - state와 라이프사이클 API의 사용이 불가능하다. (리액트 16.8v. 업데이트 이후 Hooks 기능 도입으로 사용가능해짐)