React - class 컴포넌트 VS function 컴포넌트

Hook의 등장과 함수형 컴포넌트

리엑트에서 컴포넌트를 제작하는 방법은 두가지 입니다. 기존의 리엑트에서는 클래스형태의 컴포넌트를 제작했지만 버전 16.8부터 Hook이 추가되어 공식 문서에서 함수형 컴포넌트와 훅 사용을 권고하고있습니다.

이제 함수형 컴포넌트만 알고있으면 될까?

기업에서 기존에 작성한 코드가 class 컴포넌트를 사용했을때 이를 알아볼 수 있어야 하고, 이 코드 함수형 컴포넌트로 전환하는 작업이 이루어 질 수도 있기 때문에 두 방법에 대해 모두 익혀두어야 한다고 생각합니다.

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

클래스형 컴포넌트

import React, { Component } from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
} //클래스 컴포넌트
export default Welcome;

클래스형 컴포넌트와 함수 컴포넌트 모두 동일한 기능을 지니고 있습니다. 차이점이 있다면 라이프 사이클과 state기능 등의 사용성이 다르다는 것입니다. 그리고 클래스 컴포넌트는 반드시 render함수가 있어야하며, 그 안에서 보여줄 JSX를 반환해야합니다.


함수형 컴포넌트

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
} //함수 컴포넌트
export default Welcome;

함수형 컴포넌트는 클래스 컴포넌트보다 선언이 용이하고, 메모리 자원을 덜사용한다는 장점이 있습니다. 하지만 과거에는 라이프사이클 api나 state를 사용할 수 없다는 단점이 있었습니다.
하지만 지금은 Hook의 도입으로 사용이 가능해져 단점이 해결되었습니다.

state를 통한 사용성 비교

리엑트에서 컴포넌트를 제어하는데에 다양하게 활용되는 state의 생성을 통해 두 가지 방식의 컴포넌트를 비교해 보았습니다.

클래스형 컴포넌트

import React, { Component } from 'react';

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'HyeSeong',
    };
  }
  render() {
    return <h1>hello, {this.state.name}</h1>;
  }
}
export default Welcome;

이처럼 클래스형 컴포넌트는 state를 constructor(생성자)를 통해 생성하여 사용합니다.


함수형 컴포넌트

import React, { useState } from 'react';

function Welcome() {
  const [name, setName] = useState('HyeSeong');
  return <h1>hello, {name}</h1>;
}
export default Welcome;

반면 함수형 컴포넌트는 state를 useState Hook을 사용해 생성하며 과거에는 함수형 컴포넌트에 state를 사용하고싶을때는 클래스형 컴포넌트로 바꾸어 사용했지만 새롭게 등장한 Hook을 사용해 함수형 컴포넌트에서도 다양한 API를 활용할 수 있게 되었습니다.


두 코드를 비교해보았을때 함수형 컴포넌트의 경우가 훨씬 짧은 코드로 같은 컴포넌트를 생성할 수 있습니다.

따라서 Hook API를 익히고 다양한 활용법에대해 익숙해져 함수형 컴포넌트를 사용하되, 기존의 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸거나 코드를 알아볼 수 있도록 클래스형 컴포넌트의 사용에 대해서 역시 익혀둘 필요성이 느껴집니다.