CS

[React.js] Class Component vs Funtional Component

크라00 2024. 7. 8. 16:21

< Class Component >

1. Es6 클래스 문법 사용

2. React 생명주기 메소드 사용

3. 복잡한 로직 처리

4. 코드 재사용성이 어려움

5. Hoc, render props 패턴 사용으로 컴포넌트 복잡성과 유지보수성이 좋지 않음

 

< Functional Component > 

1. 함수형 문법을 사용

2. 간결한 코드, 이해하기 쉽다.

3. React ver 16.8 부터 hooks 도입으로 생명주기메소드 사용 가능

4. 컴포넌트의 활용도, 코드베이스 단순화, 유지보수성 향상