Styled Components
Styled Components
Styled Components는 리액트에서 CSS를 작성하고 관리하기 위한 라이브러리이다. Styled Components는 자바스크립트 파일에 CSS를 작성하는 “CSS-in-JS” 라이브러리이므로 사용하지 않는 CSS 코드와 스타일은 자동으로 제거되며 BEM 방법론과 같은 CSS 클래스 명명을 관리할 필요가 없다는 장점이 있다. 또한 props를 통해 동적으로 스타일을 적용할 수 있다.
Component Driven Development (CDD)
컴포넌트 주도 개발은 컴포넌트를 모듈 단위로 개발해 UI를 구축해 나가는 설계 방법론이다. 기본적인 컴포넌트 단위부터 시작해 UI View를 구성하기 위해 점진적으로 조립해가는 상향적(bottom-up) 방법으로 UI를 구축하는 과정을 말한다.
참고링크
Storybook
Storybook은 CDD를 지원하는 UI 개발을 하기 위한 도구이다. 각각의 컴포넌트를 따로 볼 수 있게 구성해 한 번에 하나의 컴포넌트에서 작업이 가능하다.
전체 UI를 한눈에 보고 개발할 수 있다.
# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# Install dependencies
yarn
CSS in JS 방법론
스타일 정의를 css나 scss파일이 아닌 JavaScript 로 작성된 컴포넌트에 바로 삽입하는 스타일 기법. 기존 HTML, CSS, JavaScript를 각자 별도의 파일로 관리하는 방식에서 React나 Vue, Angluar와 같은 라이브러리가 인기를 끌고 컴포넌트 기반 개발방법이 주류가 되면서 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 방법이 많이 사용되고 있다.
CSS-in-JS의 장점
- CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다 (모듈성)
- CSS-in-JS는 JavaSript 환경을 최대한 활용 할 수 있다
- JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다
- 현재 사용중인 스타일만 DOM에 포함한다.
- CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다
CSS-in-JS의 단점
- 러닝 커브
- 새로운 의존성
- 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다
- 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.
Styled Component
CSS in JS 관련 React 라이브러리 중 가장 인기있는 라이브러리. 컴포넌트 기반 개발환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생했다.
Basic
설치 및 세팅
# with npm
npm install --save styled-components
# with yarn
yarn add styled-components
기본 문법
JavaScript & CSS 기초 문법과 크게 다르지 않다. 설치한 styled-components를 임포트 한 뒤 JS에서 변수를 선언하듯(혹은 React에서 컴포넌트를 만들듯이) button을 만들고, tag의 속성을 정의하고, 백틱(``) 안에 CSS 문법을 이용해 스타일 속성을 정의해준다.
import styled from "styled-components";
styled.button`
// <button> HTML 엘리먼트에 대한 스타일 정의
`;
React 컴포넌트 스타일링 할 때는 해당 컴포넌트를 임포트 한 뒤 인자로 해당 컴포넌트를 넘기면 된다.
import styled from "styled-components";
import Button from "./Button";
styled(Button)`
// <Button> React 컴포넌트에 스타일 정의
`;
더 자세한 사용법은 공식 문서를 통해 반드시 학습해두자.