클래스형 vs 함수형 컴포넌트

클래스형과 함수형 컴포넌트

중점은 JS의 class 를 이용하여 상속받느냐, 함수를 이용하느냐의 차이

• 클래스형

  class 키워드로 선언 및 할당

  Component 에서 상속받음

  여러 메서드를 오버라이팅 함

  state, lifeCycle 관련 기능 사용

  메모리 자원을 함수형보다 조금 더 사용

  임의 메서드 정의 가능

• 함수형

  function 이나 화살표 함수로 선언 및 할당

  state, lifeCycle 관련 기능이 사용 불가능 했지만 Hooks 통해 사용 가능

  메모리 자원을 클래스형보다 조금 덜 사용

  컴포넌트 사용이 편함

• props 에서의 결정적 차이

  • class 형의 경우

    this 가 존재함

    내부 함수가 호출될 때 외부로 참조되고 있는 props는 계속 변화하기 때문에 호출하고 props 값이 변화하면 호출 결과 또한 변함

  • function 형의 경우

    내부 함수가 호출될 때 외부로 참조하고 있는 props는 fix 되기 때문에 호출하고 props 값이 변화하더라도 호출 결과가 변하지 않음