[React] 함수형 컴포넌트, 클래스형 컴포넌트 뭐가 더 좋은가?

리엑트를 이제 막 시작하면서 의문이 생겼다.

컴포넌트를 선언 할 때, 두가지 방법이 있다.

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

 

1. 함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

 

2. 클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

 

방법이 두가지라는 것은 서로의 장단점이 있기 때문이라고 생각했다.

그래서 두가지 방법 간의 차이를 알기 위해서 구글링을 해보았다.

 

우선 공식홈페이지부터 확인해봤다.

두 가지 유형의 컴포넌트는 동일하지만 class는 몇 가지 추가 기능이 있다고 한다.

[출처] ko.reactjs.org

 

추가 기능이라는 부분은 'State and Lifecycle'이라고 한다.

하지만 React Conf 2018에서 Sophie Alpert와 Dan Abramov가 Hook을 소개하면서

React 16.8.0 버전 부터는 Hook을 지원하고

공식 홈페이지에서는 함수 컴포넌트를 사용하길 권장한다.

 

class의 추가 기능들을 함수 컴포넌트 Hook을 통해서 모두 구현할 수 있다고 했고,

Hook 자주 묻는 질문 페이지를 통해 친절하게 설명해주고 있다.

https://ko.reactjs.org/docs/hooks-faq.html

Hook 자주 묻는 질문 – React

 

그럼 기존 class로 작성된 코드는 사용이 불가능 한 것인가?

아니다.

React에서는 class 컴포넌트를 계속해서 서비스 할 것이고,

단지 Hook의 사용을 늘려가고 싶다고 했다.

 

그렇다면 class 컴포넌트는 배울 필요가 없는가?

꼭 그렇지도 않다.

현재 class를 이용해서 만들고 현재까지 유지보수 되고 있는 수 많은 코드들이 존재한다.

그러한 프로그램들을 Hook으로 리뉴얼 시키기에는 큰 어려움이 있고,

버릴수는 없기때문에 유지보수를 위해서라도 class 개념은 숙지하는 것이 필요하다.