참고자료
[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

클래스형 컴포넌트

클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하지만 약간의 차이점이 존재한다. 클래스형 컴포넌트는 state 기능 및 라이프사이클 기능을 사용할 수 있으며, 임의 메서드를 정의할 수 있다. render 함수가 꼭 있어야 하고 그 안에서 jsx를 반환한다.

함수형 컴포넌트

함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다. 과거에는 state와 라이프 사이클 API를 사용할 수 없다는 단점이 있었는데, 이는 리액트 훅이 도입되면서 해결되었다. 함수 컴포넌트를 선언할때는 일반적인 방식이 있고 화살표 함수 방식이 있다.

일반적인 방식

function BlackDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: function() {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const blackDog = new Blackdog();
blackDog.bark(); // 검둥이: 멍멍!

일반 함수는 자신이 종속된 객체를 this로 가르킨다.

화살표 방식

function WhiteDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: () => {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const whiteDog = new Whitedog();
whiteDog.bark(); // 흰둥이: 멍멍!

화살표 함수는 자신이 종속된 인스턴스를 가르킨다.

state 선언

state는 컴포넌트 내부에서 바뀔 수 있는 값이다. props는 부모 컴포넌트가 설정해서 자식 컴포넌트는 읽기만 하는 값이며, 변경을 하길 원하는 경우 부모 컴포넌트에서 직접 변경을 해야한다.

클래스형 컴포넌트에서는 클래스 내의 constructor() 메서드에서 state의 초기값을 생성한다. 그리고 constructor를 작성할 때 super(props)를 반드시 호출해야 한다. state를 변경하고 싶을때는 this.setState 함수를 통해서 바꾼다.

state는 constructor 밖으로 빼서 state = { } 와 같이 선언해주어도 된다.

함수형 컴포넌트에서는 리액트 훅을 사용하여 useState 함수를 통해 state 값을 불러오고 변경할 수 있다.

함수형 컴포넌트든 클래스형 컴포넌트든 state를 직접 조작하지 않고 setState나 useState와 같은 세터 함수를 사용하여 조작하는 것이다.

클래스형 컴포넌트는 Stateful 컴포넌트, 함수형 컴포넌트는 Stateless 컴포넌트라고 하기도 한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 stateful로 불리며 상대적으로 복잡한 로직을 가지고 있다. 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려주기 때문에 stateless라고 한다.

리액트 훅이 도입되면서 함수형 컴포넌트를 더 많이 사용하게 되었지만, 오래된 코드의 경우 클래스형 컴포넌트를 많이 사용하기 때문에 둘 다 제대로 알고 있는 것이 좋다.