Class Component와 Functional Component의 차이!!

클래스 컴포넌트와 함수형 컴포넌트란??

리액트 에서는 클래스 컴포넌트와 함수형 컴포넌트 사용이 가능하다!!

둘의 선언 방식은?

export default function FunctionalCounterPage(): JSX.Element {
  const [count, setCount] = useState(0);

  const onClickCountUp = (): void => {
    setCount(1);
  };

  const onClickMove = (): void => {
    void router.push("/");
  };

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

export default class ClassPage extends Component {
  state = {
    count: 0,
  };


  onClickCountUp = (): void => {
    this.setState({
      count: 1,
    });
  };

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

클래스형 컴포넌트는 랜더 함수를 사용해야 한다.

리액트는 왜 함수형 컴포넌트 사용을 지향할까?

1. 함수형 컴포넌트는 클래스형 컴포넌트보다 선언이 쉽다
2. 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다

함수형 컴포넌트와 클래스형 컴포넌트 차이는?

함수형 컴포넌트는 훅을 통해서 생명주기 메서드를 사용이 가능하고 state 관리 기능 코드 작성이 가능하다!
반대로 클래스형 컴포넌트는 생명주기 기능과 state관리 기능이 코드에 구현이 가능하다!
그리고 클래스형은 자바와 같은 상속이 가능하다!!