2. 컴포넌트 기반 개발

컴포넌트 기반으로 페이지를 개발할 경우 일반적으로 다음의 단계를 따라 진행할 수 있음

1-1. 페이지 디자인 확인

페이지를 구현하기 전에 Figma 등을 통한 디자인 시안을 확인

1-2. 특정 기준에 의해 요소를 추출

개발자는 구현하고자 하는 특정 영역의 레이아웃을 보며, 공통적인 요소(Element)를 추출함

SubWidget
검색 창 하단에 존재하는 개별 버튼 컴포넌트

LoginBar
로그인 설명, 로그인 버튼, 아이디 찾기, 비밀번호 찾기, 회원가입 텍스트를 하나로 그룹화한 컴포넌트

요소를 추출하는 몇 가지 기준

하나로 묶어서 관리하기 용이해보이는 영역을 하나의 구성요소로 추출(그룹화)
→ LoginBar

공통적이거나 반복되는 요소를 하나의 구성요소로 추출
→ Widget, SubWidget, ProductItem, …

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

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

HTML 엘리먼트
HTML 엘리먼트에 적용시킬 CSS 스타일 시트
HTML 엘리먼트 조작에 필요한 자바스크립트

→ HTML, CSS, JS 코드를 모아 그룹화하여 자신만의 맥락과 의미를 가진 별도의 ‘컴포넌트’를 작성하고 사용할 수 있음

또한 이런 방식으로 개발을 하였을 때 얻을 수 있는 일반적인 장점은 코드의 재사용(Reusability)을 통한 코드 중복 최소화, 유지보수의 용이함 등이 있음

컴포넌트 기반 개발 방식의 주요 관심사
컴포넌트 기반의 디자인 시스템을 구축을 통한 컴포넌트의 재사용성 증대
→ 개발 생산성 증가, 협업 효율화

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

개발한 컴포넌트를 페이지에 불러와서 화면을 렌더링


<!-- index.html -->
<body>
    <header>
        <!-- 검색 바 -->
        <div class="sub-widget">
            <SubWidget />
            <SubWidget /> <!-- 동일한 이름으로 컴포넌트를 여러 번 호출하여 재사용 -->
            <SubWidget />
            <SubWidget />
            <SubWidget />
            <SubWidget />
        </div>
    </header>
    <main>
        <div>뉴스 목록</div>
        <LoginBar />
        <div class="widget-board">
            <Widget />
            <Widget />
            <Widget />
            <Widget />
        </div>
        <div class="shopping">
            <ProductItem />
            <ProductItem />
            <ProductItem />
            <ProductItem />
            <ProductItem />
            <ProductItem />
        </div>
    </main>
</body>

컴포넌트 네이밍 규칙

컴포넌트 이름은 대문자로 시작해야함
ex. <Widget />

소문자로 사용할 경우 HTML에서 제공하는 표준 태그와 이름이 충돌할 수 있음
ex. <Div />, <div>div 태그</div>

React에서는 PascalCase로 네이밍
ex. <ProductItem />