클래스형과 함수형의 차이

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

	클래스형	함수형
선언방식	'class' 키워드를 사용하고 'React.Component'를 상속받으며, 'render()'메서드가 필수	일반 JavaScript함수처럼 선언하며, 더 간단하고 직관적
상태 관리	'this.state'와 'this.setState()'를 사용	'userStat'훅을 사용하여 상태를 관리
생명주기 관리	생명주기 메서드(ex componentDidMount','componentDidUpdate')를 사용	'useEffect'훅을 사용하여생명주기와 관련된 작업을 처리
성능과 메모리 사용	상대적으로 더 많은 메모리를 사용	메모리사용이 적고, 빌드 결과물의 크기가 작음

• 현재는 함수형컴포넌트 을 주로 사용하며, 그이유는 다음과 같다 (컴포넌트란 UI를 구성하는 최소단위)
  
  • 코드 간결성 : 함수형 컴포넌트는 더 간단하고 읽기 쉬운 코드를 작성할 수 있다
  • 성능 최적화 : 함수형 컴포넌트는 메모리 사용이 적고 빌드 결과물의 크기가 작아 성능상 이점이 있다
  • Hook의 도입 : React 16.8버전부터 도입된 Hook을 통해 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 쉽게 사용할 수 있게 되었다.
  • 재사용성과 테스트 용이성  : 함수형 컴포넌트는 순수 함수에 가깝기 때문에 로직의 재사용과 테스트가 더 쉽다.