클래스형 컴포넌트, 함수형 컴포넌트

• 컴포넌트
  ui나 기능을 부품화한 것을 컴포넌트라고 한다.
  이때, 리액트에서는 기존에 클래스형 컴포넌트를 사용했는데 요즘에는 함수형 컴포넌트를 쓰면서 보다 간결하게 컴포넌트를 만들 수 있다.
  최신 기술을 적용하려면 함수형 컴포넌트가 적합하지만 기존 서비스 중에 여전히 많이 클래스형 컴포넌트를 사용하기 때문에 클래스,함수 둘다 알아둬야 한다.

함수형 컴포넌트

• 선언: export default 뒤에 function을 붙이면 함수형 컴포넌트가 된다.
• state, lifecycle: state의 경우 리액트에서 제공하는 useState, 생명주기(lifecycle)는 useEffect를 활용한다.(Hook을 이용해서 해결)
• 선언식 함수, 화살표 함수 상관없이 변수의 상태를 바꿀 수 있다.
• 코드가 클래스형보다 간결하다.

import { useState } from "react";

export default function counterPage() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <div>{count}</div>
      <button onClick={counter}>카운트 올리기</button>
    </div>
  );
}

클래스형 컴포넌트

import { Component } from "react";
export default class ClassCounterPage extends Component {
  state = {
    count: 0,
  };

  onClickCounter(){
    console.log(this.state.count);
    this.setState((prev) => ({
      count: prev.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.onClickCounter}>카운트 올리기</button>
      </div>
    );
  }
}

• 선언: export default 뒤에 class를 붙이고 리액트에서 제공하는 Component를 상속받는다(extends Component)
• const,let,function을 붙이지 않는다. 이때 함수는 메소드라고 부른다.
• render(): 클래스형에서 jsx로 리턴할 때는 render()메소드를 이용한다.
• state는 객체로 만들어서 객체 안에 변수를 key로 넣는다.
• 변수,함수를 호출할 때는 this. 를 붙인다.
• lifecycle의 경우 주기마다 메소드가 있다. (componentDidMount, componentDidUpdate, componentWillUnmount)

클래스형 컴포넌트에서 this 사용 주의
어디서 실행하는지에 따라 this가 변하는 이슈가 있다(동적 this) 이때,화살표 함수로 작성하거나, onClick에 바인딩되는 함수 뒤에 .bind(this)를 덧붙이면 우리가 원하는 변수/함수를 사용할 수 있다.