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

함수형 컴포넌트

함수형 프로그래밍은 명령형(imperative) 이 아닌 선언형(declarative) 이며 애플리케이션의 상태는 순수 함수를 통해 전달된다. 애플리케이션의 상태가 일반적으로 공유되고 객체의 메서드와 함께 배치 되는 객체 지향 프로그래밍과는 대조된다.

• 함수형은 상태를 저장할 수 없다. 기본적으로 함수는 한번 실행되고 나면 메모리 상에서 사라진다. (가비지 컬렉팅)
• 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점
• 함수형 컴포넌트에서만 사용할 수 있는 hooks는 로직을 state와 분리할 수 있게 해주기 때문에 로직을 재사용할 수 있게 해준다.
• hooks 는 클로저 원리를 이용해서 state 를 저장한다.

일반 함수 형태와 arrow function 으로 정의했을 때 차이

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

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

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

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

일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.

클래스형 컴포넌트

• 상태를 저장할 수 있고, React Life Cycle Method 를 사용할 수 있다.
• render() 함수가 필수적으로 있어야 한다.
• 클래스가 인스턴스를 찍어내면 마치 그 인스턴스는 그 때부터 독자적인 생명체처럼 메모리에 상주하고 있기 때문이다. (생명체라고 생각하면 상태를 부여하고 라이프 사이클을 부여하는 것이 어색하지 않다.)
• State 와 Action을 분리하기 어렵다는 단점이 있다.