[TIL] 클래스형과 함수형 컴포넌트의 차이

문법과 구조

클래스형: class 키워드를 사용하며, render 메소드를 통해 UI를 반환합니다
함수형: 단순한 함수 또는 화살표 함수를 사용하며, 함수의 반환값이 UI입니다

State와 라이프사이클 메소드

클래스형: setState를 사용해 상태를 관리하고, 라이프사이클 메소드를 활용할 수 있습니다
함수형: useState, useEffect 등의 훅을 사용해 상태와 라이프사이클을 관리합니다

this 키워드

클래스형: this 키워드를 사용해 클래스 내부 메소드나 상태에 접근합니다
함수형: this 키워드가 필요 없습니다

코드의 간결성

클래스형: 상대적으로 코드가 길고, 설정해야 할 부분이 많습니다
함수형: 코드가 간결하고 가독성이 좋습니다

클래스형과 함수형 컴포넌트는 React에서 UI를 구성하는 두 가지 주요 방식입니다
클래스형은 전통적인 방식으로, 상태 관리와 라이프사이클 메소드를 다루는 데 있어서 상대적으로 복잡할 수 있습니다
반면에 함수형 컴포넌트는 React Hooks를 사용하여 상태와 라이프사이클을 더 간결하고 직관적으로 관리할 수 있습니다

저는 주로 함수형 컴포넌트와 Hooks를 사용합니다
그 이유는 코드의 간결성과 테스트의 용이성
그리고 React 팀이 이 방향을 권장하고 있기 때문입니다
특히 Hooks를 사용하면 컴포넌트 간에 상태와 로직을 쉽게 재사용할 수 있어서 개발이 훨씬 효율적이라고 느껴집니다