[React]Class & Functional Component

리액트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나뉩니다.

최근에는 클래스보다 함수형을 더 사용하는 편이다. 그래도 과거 소스는 클래스형으로 써져 있기 때문에 둘 사이의 차이점을 알고 있으면 도움이 될 것 같다.

차이점

	클래스형	함수형
특징	javascript 의 class 기본구조를 따른다. 그러다보니 엄청 복잡해짐	hooks를 가지고 원하는 기능을 원하는 곳에 쉽게 넣을 수 있다.
사용성	High-Order Components(HOC) 통해 컴포넌트 재사용성을 높힘	hooks를 통해서 함수재사용성을 높힐 수 있음.

Class Component

import React, { Component } from "react";
import styled from "styled-components";

const Number = styled.div`
  font-size: 100px;
  color: #000000;
  text-align: center;
`;

const Button = styled.button`
  border: 1px solid #e5e8e9;
  background-color: #ffffff;
  font-size: 15px;
  color: #000000;
`;

class ClassComponent extends Component {
  state = {
    number: 0
  };

  handleIncrement = () => {
    this.setState((state) => ({
      number: state.number + 1
    }));
  };

  handleDecrement = () => {
    this.setState((state) => ({
      number: state.number - 1
    }));
  };

  render() {
    return (
      <>
        <Number>{this.state.number}</Number>
        <Button onClick={this.handleIncrement}>더하기</Button>
        <Button onClick={this.handleDecrement}>빼기</Button>
      </>
    );
  }
}

export default ClassComponent;

위 소스를 보면 기본적으로 state, this, handle라는 것들이 보인다.

위에 차이점처럼 이런 규칙들이 있으며 그로 인해서 Functional Component와 다르게 컴포넌트 자체의 재사용을 좋아도 컴포넌트내에 부분을 재사용하기는 쉽지 않다.

Functional Component

import React, { useState } from "react";
import styled from "styled-components";

const Number = styled.div`
  font-size: 100px;
  color: #000000;
  text-align: center;
`;

const Button = styled.button`
  border: 1px solid #e5e8e9;
  background-color: #ffffff;
  font-size: 15px;
  color: #000000;
`;

function FunctionComponent() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <Number>{number}</Number>
      <Button onClick={() => setNumber(number + 1)}>더하기</Button>
      <Button onClick={() => setNumber(number - 1)}>빼기</Button>
    </>
  );
}

export default FunctionComponent;

Class Component와 다르게 뭔가 간결하지 않는가?
기존의 state는 useState를 사용하였고 바로 onClick안에 함수형으로 setNumber로 number 값을 변형시켜주었다.

함수형 컴포넌트가 속도는 빠르다고 알려져있다.
그리고 앞으로 함수형을 많이 쓸 것 같지만 클래스형 컴포넌트도 유지보수를 위해서 알아야 할 필요성이 있다.
기존에는 클래스형이 왜 좋았냐하면 State와 Lifecyle의 기능이 강력했으며 React 16.8버전 이후 Hook이라는 것이 생기며 함수형 컴포넌트의 자리가 바뀌었다.
그러니 둘다 알아둘필요는 있지만 앞으로 함수형 컴포넌트의 위치가 주목된다.