TIL 9주차 1,2,3일 - 컴포넌트 디자인

컴포넌트 단위로 개발하기

1. Component-Driven Development(CDD), 상향식 개발

• 부품 단위로 UI 컴포넌트를 만들어 나가는 개발
• 단위별 컴포넌트를 생성하고 다수의 컴포넌트를 조합하여 하나의 페이지를 완성

2. Stroybook

• https://storybook.js.org/

• Component-Driven Development 을 하기 위한 도구

• 각각의 컴포넌트들을 따로 볼수 있게 구성해주어 한번에 하나의 컴포넌트에서 작업할 수 있게 해준다.

• 사용하는 이유

  1. 컴포넌트를 문서화 하여 재사용성 확대
  2. 컴포넌트를 시각화하여 다양한 테스트 및 시뮬레이션 가능
  3. 테스트 및 개발 속도 향상

CSS in JS 방법론

• CSS 구조화를 위한 다양상 방안들이 존재

3. CSS 전처리기 (ex.SASS)

• CSS에 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 구조화한다.

(기존)

.alert {
   border : 1px solid rgba(198, 83, 140, 0.88)
}

.button {
   color : rgba(198, 83, 140, 0.88)
}

(SASS 적용)

$base-color : rgba(198, 83, 140, 0.88)

.alert {
   border : 1px solid $base-color
   }
.button {
   color : $base-color
}

• 단점
  1. CSS 용량이 커진다.
  2. 겹치는 스타일 적용문제만 해결할뿐 더 이상의 복잡한 구조화를 해결하지는 못함.

4. BEM

• BEM 이란, Block, Element, Modifier로 구분하여 클래스 명을 작성하는 방법

-block-  - Element-  -Modifier-
.header__navigation--navi-text{
   color : red
}  

• 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 하며 HTML/CSS/SASS 파일에서도 더 일관된 코딩 구조를 만들어 줍니다.

• 단점

  1. 클래스명이 장황해지고
  2. 마크업(구조)가 불필요하게 커진다.
  3. 구조 변경시 클래스명까지 수정이 불가피하다.

5. CSS-in-JS (ex.Styled-Component)

• CSS 도 컴포넌트(구조화) 기반으로 개발하기 위하여 탄생

• React 라이브러리
  https://styled-components.com/

• 리액트의 컴포넌트 처럼 CSS 개별 컴포넌트를 개발한다.

• 장점

  1. 클래스명을 자동으로 생성하므로 클래스명 중복에 따른 오류 방지
  2. CSS 를 같이 단위별 컴포넌트와 같이 적을 수 있어(개발할수 있어) 직관적이다.

• 활용 1

import styled from "styled-component"

const Title = styled.h1`      // CSS 컴포넌트, 백틱임을 잊지말자
   font-size : 1.5em;
   text-align : center;
   color : palevioletred;
`;

const Wrapper = styled.section` // CSS 컴포넌트
   padding : 4em;
   background : papayawhip;
`;

export defult function App(){  // 리액트 본문 컴포넌트
   return (
      <Wrapper>
         <Title> Hello World!</Title>
      </Wrapper>
   )
}

• 활용 2

const Tomato = styled(Button)`       
   color : tomato;
   border-color : tomato;
`;

// 기존에 Button 이라는 CSS 컴포넌트에 새로운 속성(2가지)를 추가한
Tomato 라는 새로운 CSS 컴포넌트 생성

• 활용 3

import styled from "styled-components";


const Input = styled.input`
   padding: 0.5em;
   margin: 0.5em;
   color: ${(props) => props.inputColor || "red"};
   background: papayawhip;
   border: none;
   border-radius: 3px;
   `;

export default function App() {
return (
   <div>
      <Input defaultValue="김코딩" type="text" />
      // 기본 color 적용 값인 red 적용
      <Input defaultValue="박해커" type="text" inputColor="blue" />
      // props 개념이 적용되어 inputColor로 전달된 blue 적용
   </div>
);
}

느낀점 && 미비한점

다른 것보다 Styled Component 는 정말 혁신적으로 편리했고 직관적이어서 너무 좋았다.
하지만 이것도 기본적인 CSS 실력이 받춰줘야 활용이 잘 된다는걸 느꼇다.
CSS 구조화도 결국은 CSS 문법을 갈무리 하는 것이므로 기본 CSS 문법이 밑바탕이 되어야 하는 것이고 내가 너무 부족한 걸 느낀 챕터였다.
그리고 아직 제대로 활용,실습해보지 못한 storybook 이라는 도구는 꼭 시간을 내서 공부하도록 해야겠다.