컴포넌트?
모던 웹 개발에서 자주 사용되는 개념 중 하나로, 재사용 가능하고 독립적으로 동작하는 부분을 나타냅니다. 특히 프론트엔드 프레임워크 및 라이브러리에서 컴포넌트 기반 아키텍처가 많이 사용되고 있습니다
🎈함수형 컴포넌트
특징
1. 간결함
함수형 컴포넌트는 단순한 함수로 구현되어 있어 코드가 간결하고 이해하기 쉽습니다.
2. 재사용성
순수한 JavaScript 함수이므로 다른 함수에서 호출하거나 조합하여 재사용이 용이합니다.
3. Hooks 사용 가능
React 16.8 이후 도입된 Hooks를 사용할 수 있습니다. 이를 통해 상태(state) 및 생명주기와 관련된 기능을 함수형 컴포넌트에서 사용할 수 있게 되었습니다.
🎈 클래스형 컴포넌트
특징
1.상태와 생명주기 관리
클래스 컴포넌트는 constructor를 통해 초기화하고, render 메서드로 UI를 정의하며, componentDidMount, componentDidUpdate 등의 생명주기 메서드를 통해 컴포넌트의 생명주기를 관리할 수 있습니다.
2.상태(state) 관리
클래스 컴포넌트는 this.state를 통해 내부 상태를 관리합니다.
3.인스턴스 메서드
클래스 컴포넌트는 인스턴스 메서드를 사용하여 이벤트 핸들러나 기타 로직을 구현합니다.
4. Hooks 사용 가능
React 16.8 이전에는 Hooks를 사용할 수 없습니다.
주의사항:
코드가 길어질 수 있음: 클래스 컴포넌트의 코드는 상대적으로 길어지고 복잡해질 수 있습니다.
🎈언제 어떤 컴포넌트를 사용해야 할까요?
함수형 컴포넌트
단순한 UI 표현 및 작은 기능을 가진 컴포넌트에 적합합니다.
상태나 생명주기를 사용하지 않거나 Hooks를 사용할 수 있는 경우에 유용합니다.
간단한 구조와 빠른 개발을 원할 때 사용합니다.
클래스 컴포넌트
더 복잡한 상태나 생명주기 관리가 필요한 경우에 사용합니다.
componentDidMount, componentDidUpdate 등의 생명주기 메서드를 활용해야 하는 경우에 사용합니다.
기존의 클래스 컴포넌트 코드를 유지보수해야 하는 경우에 사용합니다.
!!!!!React 16.8 이후로는 함수형 컴포넌트에서 Hooks를 사용함으로써 상태와 생명주기 관리에서 클래스 컴포넌트와 비슷한 기능을 사용할 수 있게 되었으며, 많은 프로젝트에서는 함수형 컴포넌트와 Hooks를 주로 사용하는 추세입니다.!!!!!
