[Day 46] 2022-0826 : CDD, CSS IN JS, SASS

🐈오늘 공부한 것

✔️CDD : Component Driven Development

컴포넌트 주도 개발, 말 그대로 html css js 관심사를 분리하지 않고 ui 컴포넌트별로 분리하여 개발한 뒤 각 컴포넌트를 조립해 페이지를 만들어나가는 개발 방식이다. CDD 를 도와주는 개발 도구에는 storybook과 styled-component 가 있는데, 각각 ui 컴포넌트를 관리하고 또 CSS 를 js 코드 안에 넣어서 컴포넌트별로 관리할 수 있게 한다. 

✔️CSS의 발전과 CSS IN JS

CSS 가 처음 등장한 이후로 웹페이지의 복잡성이 증가했는데, 규모가 커지고 복잡해질수록 CSS가 가진 문제점이 많이 생겨났다. 일단 CSS 코드 자체는 캡슐화도 되지 않고 스타일 중복을 막기가 쉽지 않은데 이를 해결하기 위해서 다양한 방법이 등장했다.

2006년도 쯤에 SASS 라는 CSS 전처리기가 등장했다. CSS 코드를 작성하다보면 불필요하게 중복되는 부분이 많아서 코드가 복잡해지는데 이를 해결할 수 있는 CSS의 확장 문법인 sass 와 scss를 지원한다. 확장 문법을 전처리기가 css 코드로 컴파일하는데, 여전히 여러 스타일이 중복해서 적용되었을 때 어떤 스타일이 적용될지 알 수 없다는 기존 css의 문제점을 해결하지 못했다.

이후 BEM 같은 클래스 네이밍 컨벤션도 등장했는데, 현재까지도 많이 쓰일만큼 인기있는 방법이지만, 클래스 이름이 지나치게 길어지고, 이름의 중복을 방지하는 방법일 뿐 진정한 캡슐화는 시키지 못하는 문제점이 있다. 

그러다 컴포넌트 주도 개발이 대세가 되면서, CSS 코드도 JSX 처럼 컴포넌트로 관리하는 CSS IN JS 방식이 등장했는데, 현재까지 가장 인기있는 모듈은 styled-component 이다. 

+) 추가적으로 이런 방법론이 중요한 이유는 업무 효율성에 큰 영향을 주고 팀 생산성을 끌어올릴 수 있기 때문이다!

✔️styled-component

styled-componen는 stylis 라는 전처리기를 사용해서 scss-like 문법을 사용할 수 있게 해준다. 문법이 약간 생소해서 조금 찾아봤는데 그건 아래 내용에서 정리해보겠음. 오늘 새롭게 배운 내용은 아래와 같다.

1. 기존에 정의된 스타일 컴포넌트 재사용

// StyledComponenet.jsx
import styled from 'styled-components';

const StyledElement = styled.div`
  width: 100%;
  height: 200px;
  background-color: blue;
`;

// 재활용
const NewStyledElement = styled(StyledElement)`
  width: 50%;
  background-color: yellow;
`;

function StyledComponent() {
  return (
    <>
      <StyledElement />
      <NewStyledElement />
    </>
  );
}

export default StyledComponent;

2. props 로 컴포넌트 조건부 렌더링

// 속성 값에 템플릿 리터럴을 사용해 JS 코드를 입력할 수 있다.
const NewStyledElement = styled(StyledElement)`
  width: 50%;
  background-color: ${props => props.color || 'yellow'};
`;

function StyledComponent() {
  return (
    <>
      <StyledElement />
      <NewStyledElement color={'skyblue'} />
    </>
  );
}

✔️.sass 와 .scss

이 두 확장자는 SASS 에서 지원하는 것이고, 비슷하지만 약간 차이점이 있다. 먼저 .sass 는 들여쓰기 방식으로 코드를 구분하고, .scss 는 기존 css처럼 중괄호와 세미콜론을 사용한다. 기존 css와 호환성이 좋은 scss 쪽을 더 많이 사용한다고 함. 사용 방법은 sass 패키지를 install 한 뒤에 스타일시트 파일 확장자를 ,scss 로 생성하여 코드를 작성하면 된다. 기존 방식에서 반복되는 부분을 줄여주기 위해서 프로그래밍 개념을 도입했는데, 아래와 같다. 

1. 변수 / 함수에 스타일을 저장해서 사용할 수 있다. 

2. 클래스를 여러개 사용할 경우 포함 시켜서 코드를 짤 수 있다.

3. css의 state :hover, :active 등을 포함하여 코드를 짤 수 있다. 기존에 클래스명:상태 이렇게 따로 써주던 것과 달라서 매우 편했다.

4. css 파일을 import 할 때와 동일한 방식으로 적용한다. 

css 코드를 구조화 시키기 때문에 가독성이 아주 좋은데, 아래 코드 예시가 있다. (코드 출처는 리액트를 다루는 기술 참고) 

• 변수, 함수화 하여 재사용 가능 / @mixin 함수이름 매개변수 이렇게 사용한다. 이렇게 정의된 스타일 블록은 이름으로 불러와 재사용 할 수 있다. 

// utils.scss

// 변수 사용하기
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

// 믹스인 만들기 : 재사용되는 스타일 블록 함수처럼 사용 가능.
@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

•  SassComponent 라는 하나의 클래스를 만들고 그 안에 .box 클래스를 넣어서 해당 클래스 요소 안에 포함된 .box 클래스 스타일을 지정해줄 수 있다. &.red 로 구분된 것은 .box 와 .red 클래스가 함께 쓰였을 때 지정될 스타일이고, state도 같은 방식으로 스타일을 지정한다. 

//SassComponent.scss

@import 'utils.scss';

.SassComponent {
  display: flex;
  width: 100%;
  height: 100%;
  .box {
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red {
      //.red 클래스가 .box와 함께 사용되었을 때
      background: $red;
      @include square(1);
    }
    &.orange {
      background: $orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &:hover {
      //.box에 hover 했을 때
      background: black;
    }
  }
}

🐈더 공부할 것

1. 리액트 훅 

2. storybook

🐈오늘의 느낀 점

1. 평소에 css 코드가 엄청 비효율적이고 지저분해지기 딱 좋다고 생각했는데 scss 문법과 styled-componenet를 접하고 신세계를 느낀 것 같다. 처음에 문법이 조금 어렵다고 생각했지만 지금 다시 보면 구조화가 잘 되어있기 때문에 기존보다 가독성이 더 좋다. 오늘 내용을 공부하면서 css 방법론의 발전 역사에 대해 살펴볼 기회가 있었는데 앞으로는 어떤 효율적인 방법론이 등장할지 조금 기대도 된다.