[React] 리액트의 컴포넌트란?

리액트의 컴포넌트

리액트에서 컴포넌트는 앱을 이루는 최소한의 단위

각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같음.

---

예시)

 

사이트를 구성하는 예를 들어보겠습니다.

기본적인 한 사이트의 홈 화면의 구조는 아래 그림과 같습니다.

 

홈 화면의 구성

 

컴포넌트란 UI 또는 기능을 단위별로 나눈(캡슐화한) 단위를 말합니다.

헤더, 바디, 푸터, 모두 컴포넌트의 조각이라고 말합니다.

이 조각들을 재사용할 수 있고, 이 조각들을 모아 홈 화면을 만듭니다.

 

컴포넌트들을 재사용한 화면 구성

 

헤더, 바디, 푸터의 각각의 컴포넌트를 홈 화면뿐 아니라

로그인 화면, 회원가입 화면 등등 필요 한 부분에 가져다 쓸 수 있음을 말합니다.

 

---

결론

컴포넌트는 독립적이며, 재사용 가능하게 만든 부품 조각들을 말합니다.

리액트로 만들어진 사이트 화면들은 컴포넌트의 조합입니다.