React - 함수형 Component 와 클래스형 Component의 차이

import "./styles.css";
import React from "react";
import { useState } from "react";



export default function App() {
	return (
		<div className="App">
			<Origin></Origin>
			<Hook></Hook>
		</div>
	);
}



//숫자를 증가시키는 컴포넌트의 문법 차이
//Class형 Component
//클래스 사용의 어려움과 재사용, 조립이 어렵다. 코드가 길다.
//오류파악을 직관적으로 할 수 있음
class Origin extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
          Count: 0
      };
  }

  increase = () => {
      this.setState({ Count: this.state.Count + 1 });
  };

  render() {
      return (
          <div>
              <h2>Orgin</h2>
              <h4>카운트</h4>
              <h4>{this.state.Count}</h4>
              <button onClick={this.increase}>카운트 증가</button>
          </div>
      );
  }
}



//함수형 Component
//어려운 클래스 사용을 쉽게 완화하기 위해 나옴
//로직의 재사용의 용이, 복잡성x
//오류파악을 타고 타고 들어가야함
function Hook() {

	let [Count, setCount] = useState(0);

	const increase = () => {
		setCount(Count + 1);
	};

	return (
		<div>
          <div className="spacing"></div>
          <h2>Hook</h2>
          <h4>카운트</h4>
          <h4>{Count}</h4>
          <button onClick={increase}>카운트 증가</button>
        </div>
	);
}

//https://ui.toast.com/weekly-pick/ko_20200922

 

 

Class형 Component의 특징

- 클래스 사용의 property의 혼동, 어려움과 재사용, 조립이 어렵다. 코드가 길다.
- 오류파악을 직관적으로 할 수 있음

 

함수형 Component의 특징

- 어려운 클래스형 Component의 사용을 쉽게 완화하기 위해 나옴

- 클래스형 Component를 함수형으로 바꾸는 추세

- 로직의 재사용의 용이, 복잡성x

- 오류파악을 타고 타고 들어가야함