그림 3-1 웹 페이지 추상화

이처럼 웹 페이지를 기능 단위로 나누는 과정을 추상화(abstraction)라고 합니다. 추상화는 복잡한 구조를 단순하게 표현함으로써 전체 시스템을 더 명확하게 이해하고 관리할 수 있도록 해줍니다.

앞에서처럼 웹 페이지의 구조를 header, nav, article, section, aside, footer와 같이 각 기능에 따라 나눌 경우, 이들을 각각 컴포넌트로 구현한 후, App 컴포넌트에서 모두 조합하면 하나의 웹 페이지가 완성됩니다.