컴포넌트 기반 페이지 기획, 개발

특정 기준에 의해 요소 추출

요소를 추출하는 일반적인 기준

1. 하나로 묶어서 관리하기 용이해보이는 영역을 하나의 구성요소로 추출 or 그룹화
2. 공통적이거나 반복되는 요소를 하나의 구성요소로 추출

 

추출한 단위를 기준으로 컴포넌트 구성

컴포넌트를 구성하는 가장 기본적인 요소

1. HTML Element or Tag
2. 1번 HTML Element에 적용된 CSS
3. 1번 HTML Element을 조작하는 JS

-> 이러한 HTML, CSS, JS 코드를 모아 그룹화하여 나만의 의미있는 별도의 '컴포넌트'를 작성하고 사용할 수 있다.

 

이런 방법으로 개발을 하였을 때 얻을 수 있는 대표적인 이점은 코드의 재사용성(Reusability)을 통한 코드 중복 최소화, 관리의 용이하다.

 

따라서, 이러한 컴포넌트 기반 개발 방식에서 주요 관심사 중 하나는 컴포넌트 기반의 디자인 시스템을 잘 구축하여 재상용성을 얼마나 높일 수 있을지 볼 수 있다.

 

레이아웃 배치에 맞게 작성한 컴포넌트 사용