[React] 클래스 Components VS 기능 Components

ReactApp에 state(상태)를 관리하고 제어하는 방법에는 크게 두 가지가 있는 것으로 알고있습니다.
그게 클래스 컴포넌트, 기능 컴포넌트 입니다.

 

기능 Components

import React, { useState } from "react";

function FunctionalComponent() {
  const [count, setCount] = useState(0);

  function increase() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>
  );
}

export default FunctionalComponent;

기능 컴포넌트는 제가 이전부터 공부하고 정리했던 내용들처럼 function 함수를 사용한 컴포넌트 구성이라고 볼 수 있습니다.
상태(state)를 간편하게 hook 기능 useState를 통해 제어하고 있는 것을 확인할 수 있습니다.
뿐만 아니라 코드의 길이나 이해적인 측면에서도 훨씬 효율적이라는 것을 볼 수 있습니다.

 

 

클래스 Components

import React from "react";

class ClassComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
    this.increase = this.increase.bind(this);
  }

  increase() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increase}>+</button>
      </div>
    );
  }
}

export default ClassComponent;

기능 컴포넌트를 사용하여 개별 구성 요소들을 함수로 나누는 대신 자바 언어처럼 클래스를 생성하여 구성할 수도 있습니다.
기능 컴포넌트보다 확실히 복잡하고 이해하기 어렵게 구성되어 있으며, 상태(state)를 관리하기 위해 bind 와 같은 추가적인 명령 코드들도 작성해야 합니다.

이 두 가지 컴포넌트 구성을 비교했을 때 가장 큰 차이점은 키워드라고 볼 수 있습니다.
즉, 함수 대신 클래스를 사용하는 것이죠.

<클래스 컴포넌트 특징>
(1) function 키워드 대신 class 키워드 사용
(2) () 괄호가 없음
(3) 자바 언어처럼 extends를 통해 확장성 상속을 받아 운용할 수 있음
- React.Component 를 확장 상속받음으로서 앱 클래스를 React 요소(컴포넌트) 클래스로 바꿉니다.
(4) 렌더링을 위해서 render() 함수안에 기존의 기능 컴포넌트의 return 내용처럼 구성 내용을 넣어줌
(5) function 키워드를 사용하지 않고 메소드명만을 작성하여 함수 사용
(6) constructor() 라고 하는 생성자 함수 존재
- 자바에서 사용하는 것과 유사한 생성자라고 볼 수 있으며, 변수나 함수를 초기화하는 용도로 사용합니다.



과거에 사람들이 기능 컴포넌트를 클래스 컴포넌트로 전환한 주된 이유는 상태를 갖기 위해 필요했기 때문입니다.
예를 들어 상태와 수명 주기에 관한 문서를 확인해보면, 상태(state)를 사용하기 위해서는 함수를 클래스로 변경해야 할 필요가 있었습니다.

하지만 지금에 와서는 기능 컴포넌트에서 사용할 수 있는 hook(훅) 이 있기 때문에 굳이 클래스 컴포넌트를 거칠 필요가 없습니다.
hook을 통해 상태(state)를 편히 제어할 수 있습니다.
이 hook은 클래스 컴포넌트에서는 사용될 수 없으며, 반드시 기능 컴포넌트에서만 사용될 수 있습니다.
뿐만 아니라 위의 기능 컴포넌트와 클래스 컴포넌트 코드들을 확인해보면 같은 내용을 담은 코드임에도 비교적 까다롭고 복잡해보이고 이해하기 어렵게 느껴지는 클래스 컴포넌트보다 기능 컴포넌트가 더욱 효율적이라고 볼 수 있습니다.