Component란?

Component

• React의 꽃이라 불리는 React의 핵심이자 화면을 구성하는 하나의 부품

• 내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용 가능

• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으 로 나누어 분리 가능

 

Component 트리 구조

---

React 컴포넌트 종류

 

클래스형 컴포넌트 (Class Component)	• render 함수를 반드시 사용해야 함 • lifecycle 기능 • 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용
함수형 컴포넌트 (Functional Component)	• 짧고 직관적이며, 사용방법이 더 간단함 • 메모리 사용에 이점이 있음

 

 

클래스형 컴포넌트 vs.함수형 컴포넌트

React 초창기에는 함수형 컴포넌트에는 현재 리액트의 핵심기능(state, lifecycle..)등 기능을 사용할 수 없었다.

React 16.8 부터 hooks 의 등장으로 함수형 컴포넌트에도 핵심기능을 사용할 수 있게 되었습니다

과거에는 다양한 기능을 사용할 수 있는 클래스형 컴포넌트를 사용했지만, 현재는 더 쉬운 문법을 가지고 있는 함수형 컴포넌트의 사용 비율이 압도적으로 높아졌음

공통적으로 컴포넌트의 이름은 PascalCase사용