[React] 클래스 컴포넌트 vs 함수 컴포넌트

컴포넌트 생성 방법

리액트에서 컴포넌트란 화면상에 보여지는 UI 단위라고 한다.

그렇다면 컴포넌트는 어떻게 생성할 수 있을까?

 

리액트에서 컴포넌트를 만들기 위한 방법으로는 아래와 같이 두가지 방법이 있다.

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

 

클래스 컴포넌트와 함수 컴포넌트의 역할은 동일하다.

다만 아래와 같이 차이점이 존재한다.

클래스 컴포넌트(class component)

클래스 컴포넌트는 State와 라이프사이클(Life Cycle)메소드를 사용할 수 있다.

또 리액트에서 제공하는 컴포넌트를 상속해야하고 render함수가 있어야한다.

 

Class Component

함수 컴포넌트(function component)

함수 컴포넌트는 State와 라이프사이클 메소드를 사용할 수 없다.

또 return에 JSX를 사용하여 리턴해줘야 한다.

클래스 컴포넌트와 비교했을 때 선언하기 보다 편하고 사용하기 쉽다. 

 

 

Function Component

 

함수 컴포넌트에서는 state와 라이프사이클 메소드를 사용할 수 없어서 state와 라이프사이클 메소드를 사용하기 위해 강제로 클래스 컴포넌트를 사용했었다.

이 경우로 스크립트언어를 중점으로 다룬 디자이너 또는 개발자와 협업했을 때 리액트가 도입되고나서

클래스 컴포넌트를 사용하다보니 클래스 자체를 이해하는데 어려움이 있었고 

또 클래스를 사용하면 멤버변수에 접근할 때 "this.나이", "this.이름" 이런 식으로 써야하는게 불편하고

클래스에서 함수를 사용하다보면 바인딩 이슈가 발견되고는 했었다.

 

이런 불편함을 없애기위해 리액트 훅(React Hook)이 도입되었다.

 

 

React Hook

리액트 훅(React Hook)이란 기존 클래스 컴포넌트에서만 사용할 수 있었던 state와 라이프 사이클 메소드를 함수형 컴포넌트에서도 사용할 수 있게 도와준다.

 

리액트 훅이 등장한 이후부터는  리액트 훅을 이용하여 단순한 함수형 컴포넌트를 사용하는 추세다.그렇다면 상대적으로 어렵고 복잡한 클래스 컴포넌트를 굳이 알아야 할 필요가 있을까?

 

알아야 한다.

 

리액트 훅이 등장했더라도 오래된 코드같은 경우는 대부분 클래스 컴포넌트를 사용했고 클래스 컴포넌트로 이루어진 경우가 많기 때문에 클래스 컴포넌트도 쓸 줄 알아야한다.