S3 unit3 | Component Driven Development (CDD) & Styled Component & Storybook

📌 Component Driven Development (CDD) 

: 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 (상향식 개발)

 

◽ 구조화된 CSS의 필요성이 대두되며 생긴 CSS 전처리기

CSS 전처리기(CSS Prepocessor)

: CSS가 구조적으로 작성될 수 있게 도움을 주는 도구

전처리기에 맞는 컴파일러를 사용하여 웹 서버가 인지할 수 있게 변환함

 

문제점

: 전처리기 내부 작업을 생각하지 않고, 스타일 겹치는 문제를 해결하기 위해 계층구조를 만들어 CSS 파일 용량 커짐

 

◽ CSS 전처리기 문제 보완하는 방법론들

CSS 방법론들의 공통 지향점

• 코드의 재사용
• 코드의 간결화 (유지 보수 용이)
• 코드의 확장성
• 코드의 예측성 (클래스 명으로 의미 예측) 

 

문제점

• 클래스명 선택자가 장황해졌음
• 긴 클래스명 때문에 마크업이 불필요하게 커졌음
• 재사용할 때마다 UI 컴포넌트를 명시적으로 확장해야 함

 

◽ 전처리기와 방법론이 고치지 못한 문제점들

1. 언어 로직 상에 진정한 캡슐화(encapsulation)의 개념이 없음

캡슐화

: 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념

 

2. 캡슐화가 없으므로 개발자가 유일한 클래스명을 선택해야 함

 

---

📌 CSS in JS

: CSS의 컴포넌트 기반 방식 개발

 

Styled-Component

: CSS in JS의 대표적인 React 라이브러리

CSS를 Javascript안으로 넣을 수 있음

 

CSS 구조화 방법 정리

	특징	장점	단점
CSS	기본적인 스타일링 방법	-	일관된 패턴 갖기 어려움, !important의 남용
SASS (Preprocessor)	프로그래밍 방법론을 도입하여, 컴파일된 CSS를 만들어내는 전처리기	변수/함수/상속 개념을 활용하여 재사용 가능, CSS의 구조화	전처리 과정 필요, 디버깅이 어려움, 컴파일한 CSS 파일 거대해짐
BEM	CSS 클래스명 작성에 일관된 패턴을 강제하는 방법론	네이밍으로 문제 해결,  전처리 과정 불필요	선택자의 이름이 장황하고, 클래스 목록이 너무 많아짐
Styled-Component (CSS-in-JS)	컴포넌트 기반으로 CSS를 작성할 수 있게 돕는 라이브러리	CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요 없음	빠른 페이지 로드에 불리함

 

---

Styled-Component 문법

1. 컴포넌트 만들기

const 컴포넌트이름 = styled.태그종류`
    css속성1:속성값;
    css속성2:속성값;
`;

Templete Literals 문법(백틱)을 사용하여 작성

 

 

2. 컴포넌트 재활용하여 새로운 컴포넌트 만들기

const 컴포넌트이름 = styled(재활용할 컴포넌트)`
    추가할 css속성1:속성값;
    추가할 css속성2:속성값;
`;

styled()에 재활용할 컴포넌트 전달하여 새로운 컴포넌트를 만들 수 있음

 

 

3. Props 활용

const 컴포넌트이름 = styled.태그종류`
    css속성:${(props) => 함수 코드}
`;

템플릿 리터럴 문법 사용하여 자바스크립트 코드 사용

 

> Props로 조건부 렌더링하기

const 컴포넌트이름 = styled.태그종류`
    css속성:${(props) => props.color?props.color:"white"}
`;

삼항연산자를 사용하여 조건에 따라 렌더링 할 수 있음

 

 

4. 전역 스타일 설정하기

 

(1) 전역 스타일 설정하기 위한 함수 import 하기

import { createGlobalStyle } from "styled-components";

 

(2) 함수 사용하여 컴포넌트 생성하기

const GlobalStyle = createGlobalStyle`
    button {
    padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`;

(3) 만든 컴포넌트를 최상위 컴포넌트에서 사용

function App() {
    return (
        <>
            <GlobalStyle />
            <Button>전역 스타일 적용하기</Button>
        </>
    );
}

 

📌 Storybook

: CDD 하기 위한 도구

 

storybook 주요 기능

• UI 컴포넌트 카탈로그화
• 컴포넌트 변화를 Stories로 저장
• 핫 모듈 재 로딩과 같은 개발 툴 경험 제공
• 리액트 포함한 다양한 뷰 레이어 지원

 

storybook 장점

1. 각각의 컴포넌트를 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업 가능

2. 컴포넌트 문서화(documentation)하여 재사용성 확대

3. 컴포넌트 시각화하여 시뮬레이션 가능 (버그 사전 방지)

4. 테스트 및 개발 속도 향상

5. 애플리케이션 의존성 없이 빌드 가능

 

Storybook 사용방법

(1) storybook 설치

npx storybook init

package.json을 보고 사용 중인 프론트엔드 라이브러리에 맞는 Storybook 사용환경을 알아서 만들어주는 명령어

 

(2) Storybook 실행

npm run storybook

localhost:6006로 접근하여 Storybook 실행시킴

 

(3) React 컴포넌트 export하기

Title.js 생성

import React from "react";

const Title = ({title, textColor}) => (
<h1 style={{color: textColor}}>{title}</h1>
);

export default Title;

 

(4) 스토리 만들기

먼저 같은 위치 폴더에 Title.stories.js 파일 생성

// 앞에서 작성한 컴포넌트를 불러옵니다.
import Title from "./Title";

// title : 컴포넌트 이름으로, '/'를 넣어 카테고리화 할 수 있습니다.
//         이후 예시에서 조금 더 자세히 설명합니다.
// component : 어떤 컴포넌트를 가져와서 스토리로 만들 것인지 명시합니다.
// argTypes : 컴포넌트에 필요한 전달인자의 종류와 타입을 정해줍니다.
//            지금은 title, textColor이라는 전달인자에 text 타입이 필요함을 의미합니다.
export default {
    title: "Practice/Title", 
    component: Title,
    argTypes: {
        title: { control: "text" },
        textColor: {control: "text"}
    }
}

// 템플릿을 만들어줍니다. 이 템플릿에서는
// Title 컴포넌트가 args를 전달받아 props로 내려줍니다.
const Template = (args) => <Title {...args} />

// Storybook에서 확인하고 싶은 컴포넌트는 export const로 작성합니다.
// 템플릿을 사용하여 Storybook에 넣어줄 스토리를 하나 만들어주었습니다.
// Template.bins({}); 는 정해진 문법이라고 생각하고 사용하시면 됩니다.
export const RedTitle = Template.bind({});

// 만들어준 스토리의 전달인자를 작성해줍니다.
RedTitle.args= {
    title: "Red Title",
    textColor: "red"
}

// 스토리를 하나 더 만듭니다.
export const BlueTitle = Template.bind({});

// 스토리의 전달인자를 작성해줍니다.
BlueTitle.args= {
    title: "Blue Title",
    textColor: "blue"
}

 

(5) 전달인자 직접 받는 스토리 만들기

앞서 만든 스토리 밑에 작성

...
export const StorybookTitle = (args) =>{
    return <Title {...args} />
}

이번에는 전달 인자를 직접 작성할 수 있고 그에 맞춰 모습도 변경됨

다양한 argTypes를 작성하여 다양한 모습을 테스트해볼 수 있음

 

Storybook 공식문서

Introduction to Storybook