[React] 리액트의 컴포넌트(Components)

리액트의 컴포넌트(Components)

 

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

 

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

 

---

예시)

 

사이트를 구성하는 예를 들어보려고 한다.

기본적인 한 사이트의 홈 화면의 구조는 아래와 같다.

 

홈 화면의 구성

 

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

헤더, 바디, 푸터, 모두 컴포넌트의 조각이라고 이해하면 쉽다.

이 조각들을 재사용할 수 있고, 이 조각들을 모아 홈 화면을 구성한다.

 

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

 

헤더, 바디, 푸터의 각각의 컴포넌트를 홈화면뿐만 아니라 로그인 화면, 회원가입 화면 등

필요한 부분에 가져다 쓸 수 있다.

 

---

 

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

리액트로 만들어진 화면들은 컴포넌트의 조합이라고 할 수 있다.