맨 처음 리액트를 공부했을 때 컴포넌트를 선언하는 방법으로 "Class Component" 방식을 공부했었다..
진짜... 진짜로 어렵다고 생각을 헸다. 뭐가 그렇게 적을게 많은지...
그리고 그 다음번 리액트 강의에서는 함수형 컴포넌트 선언 방식이란 걸 배웠는데 왜 이걸 냅두고 Class 컴포넌트를 썼던걸까? 라고 생각을 많이 했었다.
지금와서 생각해보면 Class컴포넌트 방식은 오래전부터 리액트를 사용하던 회사들은 다 사용하고 있기 때문에 유지보수 측면에서 보면 꼭 배우긴 해야 된다고 생각을 하고 있다.
먼저 컴포넌트의 기능을 잠깐 살펴보면
"컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수 있다.
컴포넌트의 목적에 따라 프레젠테이션(presenter) 컴포넌트와, 컨테이너(container) 컴포넌트로 나누기도 하는데 이에 대해서는 이전 게시물을 확인해보길 바란다.
클래스 컴포넌트에 대해 알아보자
Class-Component(클래스형 컴포넌트)란?
클래스형 컴포넌트는 컴포넌트를 Class형태로 작성하는 것입니다. ES6 이후로 추가된 class명령을 통해서 컴포넌트를 작성하며 이때 render()함수로 결과물을 반환한다.
클래스형 컴포넌트의 특징은 컴포넌트의 상태와 관련된 state기능과 생명주기 기능을 이용할수 있다는 것이다.
그리고 변수나 함수등을 부를 때 this를 통해 호출해야 한다는 특징이 있다.
Functional Component(함수형 컴포넌트)란?
함수형 컴포넌트는 컴포넌트를 함수와 같은 방식으로 작성하는 것이다. create-react-app을 통해 리액트앱을 생성했을 때 app.js의 형태가 함수형 컴포넌트이고 위 이미지를 통해서도 살펴보길 바란다.
함수형 컴포넌트는 import문도 그렇고 전체적으로 익숙하기 때문에 사용하기 편하다는 장점이 있다. 또한 메모리를 합수가 더 적게먹고, 배포 단계에서도 결과물의 용량이 작아지는 효과도 있다.
하지만 함수형 컴포넌트는 클래스형 컴포넌트에서 이용하던 state나 생명주기 기능을 이용할 수 없다는 단점이 있다.
클래스형 컴포넌트 VS 함수형 컴포넌트
그렇다면 우리는 두가지 방식 중에서 무엇을 우선시하며 사용해야 할까? 결론부터 이야기 하면 공식 문서에서도 함수형 컴포넌트를 우선적으로 사용해야한다고 권장하고 있다.
함수형 컴포넌트는 클래스형 보다 간결하다는 장점이 있다. 앞에서 클래스형 컴포넌트에서 이용하던 state와 생명주기 기능을 이용하지 못한다고 했었는데 이 부분은 Hooks라는 기능이 등장하면서 함수형 컴포넌트에서도 이들을 사용할 수 있게 되었다.
