리액트, 뷰, 앵귤러 라이브러리들은 웹 화면이 많이 바뀌는 상황에 작업하기 좋은 라이브러리들입니다.
이들은 컴포넌트 방식으로 개발을 하는데, 리액트에서는 두 가지 방법으로 컴포넌트를 만들 수 있습니다.

클래스 방식
훅을 활용한 함수형 방식

이 둘을 비교해보면서 리액트에 대해 좀 더 깊이 알아봅시다.

공부의 포인트

기본적으로 리액트를 활용한다는 개념은 props, state, life cycle API 를 적절히 배합하여 어플리케이션을 만드는 것이었습니다.
클래스는 이 모든 것이 처음부터 가능했지만, 함수형은 props만 됐었죠.

함수형이 전면에 사용되기 시작한 건 훅이 나오면서부터 입니다. 그렇다면, 훅은 그동안 함수형에서 구현할 수 없었던 state와 life cycle API를 가능하게 해주는 것이겠죠?
훅스가 어떻게 그걸 가능하게 하는지, 어떤 차이가 있는지를 유심히 보세요.

Props

외부, 부모의 값을 받아올 때 사용되는 개념입니다.
class는 this.props로, 함수형은 매개변수로 받아옵니다.

// class
class ClassComp extends React.Component {
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number: {this.props.initNumber}</p>
      </div>
    )
  }
}

// function
function FuncComp(props) {
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number: {props.initNumber}</p>
    </div>
  )
}

State

해당 컴포넌트 안에서 값을 바꿀 때 사용되는 개념입니다.
class는 this.state로 값을 사용하고, this.setState로 state값을 바꿉니다.
함수형은 useState 훅을 사용하여 동일한 효과를 냅니다.

const [state, setState] = useState(<state의 초기값>);

// class
class ClassComp extends React.Component {
  state = {
    number: this.props.initNumber
  }
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number: {this.state.number}</p>
        <input type="button" value="random" onClick={
          function () {
            this.setState({ number: Math.random() })
          }.bind(this)
        } />
      </div>
    )
  }
}

// function
import React, { useState } from 'react';

function FuncComp(props) {
  const [number, setNumber] = useState(props.initNumber);
  
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number: {number}</p>
      <input type="button" value="random" onClick={
        function () {
          setNumber(Math.random());
        }
      } />
    </div>
  )
}

Lifecycle API

컴포넌트의 생명주기입니다. 컴포넌트가 렌더링되고, 업데이트되고, 화면에서 사라지는 일련의 이벤트마다 우리가 코드를 작성할 수 있게 해주죠.
class방식은 공식 홈페이지에서 최신버전을 확인할 수 있습니다.

함수방식은 useEffect로 구현합니다.
useEffect는 componentDidMount(2번째 인자에 []넣어줌), componentDidUpdate(2번째 인자로 참조값 적어줌) 효과를 내며(렌더링 될때마다 호출된다는 얘기)
함수를 return하면 해당 컴포넌트가 사라지기 직전에 호출되는 componentWillUnmount(2번째 인자에 []), componentWillUpdate(2번째 인자로 참조값 넣음)효과를 냅니다.
그 외 추가적인 훅들 및 혹의 전체 내용은 공홈에서 확인할 수 있습니다.

---

참고자료
생활코딩 react class vs function style 강의