component

React에서 컴포넌트를 사용하는 방식에는 클래스형과 함수형 두 가지가 있다. 과거에는 클래스형 컴포넌트를 더 많이 사용했지만 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)이 지원되면서 현재에는 함수형 컴포넌트를 더 많이 사용하는 추세이다.

hook이 지원되면서 함수형에서도 컴포넌트의 lifecycle을 이용할 수 있게 되었다.

• 참고 링크
  https://velog.io/@ryh0629/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0

차이점

클래스형

1. state, lifeCycle 기능 사용 가능.(현재에는 함수형에서도 사용 가능)
2. 함수형 컴포넌트보다 메모리 자원을 더 소비한다.
3. 임의 메서드를 정의할 수 있다.

함수형

1. 컴포넌트 선언에 좀 더 편하다.
2. state, lifeCycle 기능 사용 가능. (hook이 지원되기 시작하면서 사용 가능)
3. 메모리 자원을 클래스형 컴포넌트보다 덜 소비한다.

선언방식

클래스형

1. class로 선언해줘야한다.
2. 컴포넌트로 상속받아야 한다.(extends Componet)
3. render() 함수가 있어야 한다.

render() 함수는 가장 처음 어떻게 보일지를 정하는 초기 렌더링을 정의한다.

import { Component } from "react";

export default class Example extends Component {
  render() {
    const name = "홍길동";
    const age = 16;
    const address = "구로구";
    return (
      <div>
        제 이름은{name}입니다. 제 나이는{age}입니다. 제가 사는 곳은 {address}
        입니다.
      </div>
    );
  }
}

함수형

1. function으로 선언해줘야 한다.
2. 컴포넌트 상속과 render() 함수가 불필요하다.

export default function Example() {
  const name = "홍길동";
  const age = 16;
  const address = "구로구";
  return (
    <div>
      제 이름은{name}입니다. 제 나이는{age}입니다. 제가 사는 곳은 {address}
      입니다.
    </div>
  );
}