클래스형 컴포넌트 (Class Component)
- 정의: ES6 클래스를 사용해 정의됩니다.
- 라이프사이클 메서드: 여러 라이프사이클 메서드를 가지고 있어 복잡한 상태 관리와 사이드 이펙트 처리가 가능합니다.
- 상태 관리: this.state와 this.setState를 사용하여 상태 관리를 합니다.
함수형 컴포넌트 (Functional Component)
- 정의: 단순한 함수로 정의되며, 더 간결하고 읽기 쉽습니다.
- 라이프사이클 메서드: Hook이라는 기능을 통해 라이프사이클 메서드를 사용하지 않고도 비슷한 기능을 수행할 수 있습니다.
- 상태 관리: useState와 같은 Hook을 사용하여 상태를 관리합니다.
- 성능: 리액트 팀에 따르면 함수형 컴포넌트가 약간 더 빠를 수 있다고 합니다.
주로 사용되는 방식과 이유
초기에는 클래스형 컴포넌트가 주로 사용되었으나, React 16.8 이후 Hook의 도입으로 함수형 컴포넌트가 많이 사용되게 되었습니다.
- 간결성: 함수형 컴포넌트는 일반적으로 더 간결하고 명확합니다.
- Hook의 도입: useState, useEffect와 같은 Hook을 통해 함수형 컴포넌트에서도 복잡한 상태 관리와 사이드 이펙트 처리가 가능해졌습니다.
- 커뮤니티와 트렌드: React 커뮤니티와 공식 문서도 함수형 컴포넌트와 Hook을 적극 권장하고 있으며, 새로운 프로젝트에서는 함수형 컴포넌트가 더 널리 사용되고 있습니다.
화이팅 화이팅