[React] class방식 vs. function 방식 컴포넌트 코드량 비교

클래스 컴포넌트와 함수형 컴포넌트의 코드를 비교해보면서 함수형 컴포넌트의 소중함(?)에 대해서 알아보도록 하자.. 

위와 같이 + 버튼을 누르면 숫자가 1씩 증가하고, -버튼을 누르면 숫자가 1씩 감소되는 아주 간단한 기능을 만들어보면서 class형 컴포넌트와, 함수형 컴포넌트의 코드 양을 비교해보자.

클래스(class)

export default class App extends React.Component {
  state = {
    num: 1
  };
  render() {
    const num = this.state;
    return (
      <div className="app">
        {num}
        <button onClick={this.incre}>+</button>
        <button onClick={this.decre}>-</button>
      </div>
    );
  }
  incre = () => {
    this.setState((state) => {
      return {
        num: state.num + 1
      };
    });
  };
  decre = () => {
    this.setState((state) => {
      return {
        num: state.num - 1
      };
    });
  };
}

 

함수(function)

import React, { useState } from "react";

export default function App() {
  const [num, setNum] = useState(0);
  const incre = () => {
    setNum(num + 1);
  };
  const decre = () => {
    setNum(num - 1);
  };
  return (
    <div className="App">
      {num}
      <button onClick={incre}>+</button>
      <button onClick={decre}>-</button>
    </div>
  );
}

딱 보기만 해도 전체적인 코드양에서부터 차이가 난다.

물론 함수형 컴포넌트의 장점은 더 많지만 코드량만 따져보더라도 아주 간단한 기능 구현만 해도 이렇게 차이가 나는데, 좀 더 복잡한 기능을 만들게 되면 코드양의 차이가 상당할 것 같다...