👀 Component-Based

Component는 하나의 기능 구현을 위한 여러 종류의 코드 묶음으로, UI를 구성하는 필수 요소이다.

React를 이용해, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하는 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.

모든 React 애플리케이션은 최소 한 개의 컴포넌트를 가지며, 이 컴포넌트는 애플리케이션 내부적으로 Root의 역할을 한다.

최상위 컴포넌트는 Root의 역할을 하므로, 다른 자식 컴포넌트를 가질 수 있으며 아래와 같은 트리구조로 형상화할 수 있다.

위의 이미지를 기반으로, 유튜브를 예시로 구조를 형상화하면 아래와 같다.

헤더는 자신의 아래에 검색이나 세팅같은 자식 컴포넌트를, 콘텐츠 리스트는 각각의 영상 콘텐츠들을 자식 컴포넌트로 가질 수 있다.

✔ Component-based 의 장점

위의 유튜브 UI 이미지를 예시로, 기존의 헤더를 화면 왼쪽으로 옮겨 사이드 바로 변경한다고 가정했을 때, 아래와 같은 수정이 필요하다.

React를 이용하여 컴포넌트 기반으로 애플리케이션을 만들었다면, 아래와 같은 수정이 필요하다.

컴포넌트는 각자의 기능을 가지고, UI의 한 부분을 맡고 있으므로, 원하는 수정사항에 맞춰 기존 컴포넌트의 위치만 수정하면 된다.

🔥 component-based 개발의 특징 정리

• 기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발한다.

• 마크업, 디자인, 로직을 긴밀하게 연결하여 개발할 수 있다.

• 컴포넌트는 서로에게 의존성이 낮고 독립적으로 작동하기 때문에 하나의 기능 변경 시 다른 컴포넌트를 수정할 필요가 없다.

• 컴포넌트는 재사용 가능하여 효율적인 개발이 가능하다.

Reference: 코드스테이츠