Component Driven Development

DY·2022년 8월 26일
0

React

목록 보기
2/9

CDD (Component Driven Development)

  • 구조적으로 코드를 작성하는 방법
  • 페이지를 구성할때 컴포넌트 단위로 부분적으로 개발을 하고 컴포넌트들을 조합해서 만드는 방식을 CDD 라고 한다.

Css-in JS

CSS 방법론 탄생 배경

  • 점점 복잡해지는 프로젝트 규모와 CSS가 다양한 디바이스에서 활용도가 커지고 있는 상황에 다른언어와는 달리 일관적인 작성 패턴이 없어서 복잡하고 유지보수 하기 힘든 상황. CSS를 구조화 하는 방법을 연구하면서 생긴 이론

CSS 구조화 방법론

  • 위 와같은 배경을 해결하기 위해 CSS 구조화 하는 다양한 방법론이 대두되고 있음.
  • 목적, 지향점
    • 코드의 재사용
    • 코드의 유지보수성
    • 코드의 확장성
    • 클래스명으로 기능 예측
    • 프로그래밍개념 도입

CSS Preprocessor

  • CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
  • CSS를 작성시 번거로운 작업이나, CSS의 양이 커지면서 발생하는 문제를 프로그래밍 개념(변수, 함수, 상속 등)을 사용하여 해결했고, 이를 적용하기 위해서 CSS Preprocessor에 맞는 Compiler를 사용해야 한다.

SASS

  • Syntactically Awesome Style Sheets
  • CSS 전처리기. SCSS코드를 읽어서 전처리후 컴파일해서 전역CSS번들 파일을 만들어주는 역할
  • 변수선언가능
  • 하지만 CSS의 구조화를 하는것보다 단점이 많아짐

Css-in-JS 탄생 배경

  • SASS, BEM, OOCSS, SMASS같은 여러가지 방법론이 탄생했지만 CSS를 컴포넌트 단위로 개발하기엔 무리가 있었고 이를 위해 CSS-in-JS가 만들어 졌다.
  • 단점 : 빠른 페이지 로드에 불리함.

Styled-Component

  • 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 패턴

CDD 개발 도구

Styled Components

  • React 환경에서 Component Driven Development를 할수있게 도와주는 라이브러리
  • CSS작성시 한 파일에 내용이 길어져서 관리하기 힘들때, Class, id명을 정할때, 스타일 속성이 겹쳐서 원하는대로 동작하지 않을 때 등 css작성시 컴포넌트화를 통해서 이러한 문제를 해결
  • 기존의 React는 HTML+JS 형태였다면 이 라이브러리를 통해 HTML + CSS + JS를 JS파일에서 개발이 가능해지고 React의 장점인 component 단위로 개발이 가능해 졌다.

설치

// with npm
$ npm install --save styled-components

// with yarn
$ yarn add styled-components

//pacjage.json에 추가
{
  "resolutions": {
    "styled-components": "^5"
  }
}

// 사용방법
import styled from "styled-components"

Styled Componets 문법

  1. 컴포넌트 만들기
  • 컴포넌트를 선언하고 css를 설정해주므로써 css가 입혀진 컴포넌트가 만들어짐
const component = styled.태그종류 `css 문법`
  1. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기
  • 기존에 있는 컴포넌트에 css를 추가하거나 수정하는 방식
const recyclecomponent = styled(component)`css문법`
  1. props
  • 기존 component와 마찬가지로 props를 가져올 수 있다.
//방법 1
<Button1 skyblue>Button1</Button1>

const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

//방법 2

<Button1 props.color = "red">Button1<Button1>
const Button1 = styled.button`
	background : ${props => (props.color ? props.color : "blue")}
`
  1. 전역 스타일 지정하기
  • 전체 컴포넌트에 스타일을 일괄로 적용하고 싶을 때 사용
  • createGlobalStyle을 사용한다.
  • 최상위 컴포넌트에 적용을 해야한다.
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
	padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`
  1. react-icon 적용
  • react-icon을 className없이 styled component로 css적용
import {SiNaver} from 'react-icons/si';

const SiNaversvg = styled(SiNaver)`
    color : "#03C75A";
    width : 30px;
    height : 30px;
`
  1. attrs 적용
  • inline -style을 적용하기위함
import {SiNaver} from 'react-icons/si';

const SiNaversvg = styled(SiNaver).attrs({color:"#03C75A"})`
    color : "#03C75A";
    width : 30px;
    height : 30px;
`

Storybook

  • https://storybook.js.org/
  • 컴포넌트들을 문서화하고 관리할수 있는 UI 개발 도구
  • CDD를 사용하면서 Component explorer가 등장했고 가장 많이 사용하는 도구
  • 재사용성을 확대하기 위해 components를문서화 하고 자동으로 시각화 하여 시뮬레이션할수 있다.
    • 다양한 테스트를 해봄으로써 버그를 사전에 방지 할 수 있고 개발속도가 향상되고 의존성 걱정없이 빌드 할 수 있다.
    • 회사에서 내부 개발자들에게 컴포넌트자체를 문서화 하므로써 라이브러리화 시킬 수 있고 인수인계에도 유리하다.
  • UI 컴포넌트들을 카탈로그화
  • 컴포넌트 변화를 Stories로 저장
  • 핫 모듈 재 로딩과 같은 개발 툴 경험 제공(변경사항 바로 적용하는 것)
  • 다양한 view layer 제공

Storybook 사용방법

  • 개발할 프론트엔드 폴더에서 아래의 명령어로 설치한다.
npx stroybook init
  • package.json을 보고 프론트엔드라이브러리에 맞는 사용환경을 알아서 만들어준다.
  • 아래의 명령어로 실행한다.
npm run storybook
profile
프론트엔드 개발자가 되기 위해 공부중입니다. 블로그는 공부한 내용을 올리고 있습니다.

0개의 댓글