Styled Component

1. CDD란

• Component-Driven Development의 약자로, 재사용할 수 있는 UI 컴포넌트를 미리 디자인 하고 개발 할 수 있도록, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발이다.
• CDD가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했다. 그 중 하나가 storybook이다.
• storybook에서 지원하는 주요기능은
  • UI 컴포넌트들을 카탈로그 화하기
  • 컴포넌트 변화를 stories로 저장하기
  • 핫 모듈 재로딩과 같은 개발 툴 경험 제공하기
  • 리액트를 포함한 다양한 뷰 레이어 지원하기

2. 구조적인 CSS 작성 방법의 발전

3. Styled-Component

• Styled-component를 사용하면 기존 CSS 문법으롣도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다. 기존에 알던 JavaScript(React) & CSS와 크게 다르지 않다. JavaScript에서 변수를 선언하듯이 (혹은 React)에서 컴포넌트를 만들듯이) 변수명(예를 들어 button)을 만들고, tag의 속성을 정의하고(예를 들어 a tag) 그리고 back-ticks(') 안에 기존 CSS 문법을 이용하여 스타일 속성을 정의해준다.
• 예)

  const Button = styled.a`
    display: inline-block;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin: 0.5rem 1rem;
    width: 11rem;
  `;

• Styled component와 비슷한 기능을 가진 CSS-in-JS 라이브러리로 emotion, glamorous, aphrodite과 styled-jsx가 있고 이중에서 현재 가장 인기있는 라이브러리는 styled-component이다.
• Styled component는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props를 사용할 수 있다.
• 같은 스타일 속성을 지닌 여러개의 컴포넌트들 중 몇개의 컴포넌트에는 약간의 변화를 주고 싶은 경우도 있을 것이다. 이때에는 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled()로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해주면 기존 속성을 확장하여 사용할 수 있다.
• 컴포넌트에 props로 스타일 속성이 전달되면 해당 컴포넌트에 props로 전달된 속성을 우선 적용할 수 있다. 만약 전달되는 속성이 없다면 기본으로 설정된 속성을 적용한다. 이는 styled component가 개발자에 의해 설정된 속성과 기본 속성을 구분할 수 있기 때문이다.

4. Styled-Component의 특징

Automatic critical CSS

• styled component는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있다.

No class name bugs

• styled component는 스스로 유니크한 className을 생성한다. 이는 className의 중복이나 오타로 인한 버그를 줄여준다.

Easier deletion of CSS

• 기존에는 더이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기 위해 CSS 파일 안의 className을 이리저리 찾아야했다. 하지만 styled component는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제된다.

Simple dynamic styling

• className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다.

Painless maintenance

• 컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다.

Automatic vendor prefixing

• 개별 컴포넌트마다 기존의 CSS를 이용하여 스타일 속성을 정의하면 된다. 이외의 것들은 styled component가 알아서 처리해준다.