> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/reactjs/cdn/component.md).

# Component

## Component

컴포넌트(Component)란 React Application을 구성하는 최소 단위를 말한다. 컴포넌트는 다음을 포함한다.

* props - 외부에서 전달받은 데이터
* state - 컴포넌트를 구성하는 기본 데이터
* view - JSX로 이루어진 화면 정보
* lifecycle - 컴포넌트 생성 및 변경에 관련된 이벤트 메소드

## Component 종류

React에서의 컴포넌트는 두 가지 유형으로 구분된다.

* 클래스형 컴포넌트(Class Component)
* 함수형 컴포넌트(Functional Component)

처음 학습할 때는 둘 중 한 가지만 배우는 것이 좋으며, 각각 장단점이 있다.

비교 글은 대한 정보는 링크로 대체한다.

{% embed url="<https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/>" %}

## 문서 링크

### 클래스 컴포넌트(Class Component)

{% content-ref url="/pages/5siq7D90HlABeCLExnZx" %}
[클래스 컴포넌트](/web/develop-page/js/reactjs/cdn/component/class-component.md)
{% endcontent-ref %}

### 함수 컴포넌트(Functional Component)

{% content-ref url="/pages/RHnk7uyHantWsYvOikJ5" %}
[함수형 컴포넌트](/web/develop-page/js/reactjs/cdn/component/functional-component.md)
{% endcontent-ref %}