19. 클래스 컴포넌트와 함수 컴포넌트

Class Component

클래스는 객체이면서 그 안에 변수나 또다른 객체와 그 변수 혹은 객체를 이용한 함수들이 정의되어 있으며 이를 통해서 새로운 객체를 만들 수 있습니다. 

 

 예시 코드

위 예시 코드를 보며 설명한다면 위의 Monster라는 객체를 통해서 monster라는 객체를 만들기도 하며 Monster를 상속받은 SuperMonster라는 클래스도 만들 수 있다는 것을 확인할 수 있습니다.

 

 

Fuction Component 

함수형 컴포넌트는 컴포넌트를 함수 형식으로 만들고 return을 통해서 JSX문을 리턴하여 화면에 출력하는 방식으로 사용됩니다.

위의 이미지 처럼 함수형은 위에서는 변수나 함수를 정의하고 아래에는 그 정의한 변수와 함수를 통해서 화면을 출력하고 기능을 적용합니다. (return 위의 구문을 자바스크립트 영역이라고 생각하고 아래 부분을 HTML 부분이라고 생각하면 이해가 편하다.)

 

현재는 많은 회사들이 후에 개발된 함수형 컴포넌트를 사용하는 추세이지만 이미 클래스 컴포넌트로 서비스를 구축해둔 곳들은 이를 바꾸거나 유지 보수하기 위해서 클래스 컴포넌트를 사용하기 때문에 클래스 컴포넌트도 알아두어야 할 필요가 있다.