[FE / REACT] 클래스형 컴포넌트 vs 함수형 컴포넌트

컴포넌트

• 리액트 컴포넌트란 UI를 구성하는 최소 단위

 

클래스형 컴포넌트

• extends 키워드를 사용해 React.Component 클래스 상속받음
• render() 메소드를 이용해 UI 정의
• state, props를 이용해 상태 관리 state의 경우 this.state로 접근 가능하고 this.setState() 메소드를 이용해 업데이트할 수 있음
• 라이프사이클 메서드를 사용해 컴포넌트의 생성, 업데이트, 제거에 대한 로직 구현

 

함수형 컴포넌트

• 함수 문법을 이용해 컴포넌트 작성. 별도의 클래스 상속 없음
• return문을 이용해 UI 정의
• props를 사용해 상태 관리
• 리액트 훅을 사용해 state 관리, 라이프사이클 관리

 

클래스형 컴포넌트의 장단점

• 장점
  • 라이프 사이클 메서드를 사용해 컴포넌트의 사이클을 관리하므로 코드의 구조화가 쉽고 관리가 용이함
  • this 키워드를 사용해 인스턴스의 속성과 메서드에 접근
• 단점
  • 상대적으로 코드가 길고 복잡해 가독성이 떨어질 수 있음
  • 함수형에 비해 성능이 떨어짐. 인스턴스 생성 과정이 필요하며 불필요한 메서드와 속성이 포함될 수 있기 때문

 

함수형 컴포넌트의 장단점

• 장점
  • 클래스형에 비해 코드가 간결하고 가독성이 높음
  • 함수형 프로그래밍 패러다임을 따르기 대문에 부수효과(side effect)를 최소화하고 로직이 명확함
  • 인스턴스 생성 과정이 없어 메모리 사용량이 줄어들고 렌더링 성능이 비교적 좋음
  • Hook을 사용해 상태 관리가 편리해짐
• 단점
  • 라이프사이클 메서드가 없어 useEffect를 사용해야 함