[React] 클래스형 컴포넌트, 함수형 컴포넌트

React에서는 주로 두 가지 타입인 클래스형 컴포넌트와 함수형 컴포넌트를 사용한다.

✍ 클래스형 컴포넌트 (Class Compornent)

클래스형 컴포넌트는 ES6 클래스를 기반으로 만들어진다.
render 메서드를 포함하고, 이 메서드는 React 요소를 반환한다.
클래스형 컴포넌트는 생명주기 메서드(lifecycle methods)에 접근할 수 있으며, 내부 상태(state) 관리가 가능하다.

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'John' };
  }

  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

✍ 함수형 컴포넌트 (Function Compornent)

함수형 컴포넌트는 JavaScript 함수로 작성된다.
props 객체를 인자로 받아 React 요소를 반환하는 구조이다.
원래 함수형 컴포넌트에서는 생명주기 메서드나 내부 상태 관리가 불가능 했으나, React Hooks의 도입으로 이제 함수형 컴포넌트에서도 상태 관리 및 생명주기 기능을 사용할 수 있게 되었다.

function Welcome(props) {
  const [name, setName] = React.useState('John');

  return <h1>Hello, {name}</h1>;
}

📌 class Component vs function Component

최근에는 Hooks의 도입으로 인해 많은 개발자들이 함수형 프로그래밍 패러다임을 채용하고 있다. 따라서 많은 경우에 함수형 컴포넌트와 Hooks를 사용하는 것이 권장되고 있다.

그러나 양쪽 모두 여전히 유효하며 필요에 따라 선택해서 사용할 수 있다.
두 가지 방법 모두 알고 있으면 좋다.