Component-Based

컴포넌트로 생각하기

 

컴포넌트

: 하나의 기능 구현을 위한 여러 종류의 묶음. UI를 구성하는 필수 요소 

 

- 리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 컴포넌트를 여러개 만들고 조햡하여 애플리케이션을 제작

- 모든 리액트 애플리케이션은 최소 한개의 컴포넌트를 가지고 있음

- 이 컴포넌트는 애플리케이션 내부적으로 근원(root)가 되는 역할

- 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있음

- 이 계층적 구조(hierarchy)를 트리 구조로 형상화 할 수 있음

 

유튜브를 예시로 들었을 시

- 근원이 되는  루트 컴포넌트가 있고 그 아래 헤더, 콘텐트 리스트가 나옴

- 헤더는 자신 아래 서치와 셋팅 같은 자식 컴포넌트를, 콘텐츠 리스트는 각각의 영상 콘텐츠들을 자식 컴포넌트로 가질 수 있음

- 트리 구조에서 보듯이 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으며 UI의 한 부분을 담당하고 있음

- 이렇게 독립적인 컴포넌트들을 여러 개 만들고 한데 모아 복잡한 UI를 구성할 수도, 애플리케이션을 만들수도 있음