[Worksheet 220517] React 라이브러리 - 스타일링

스타일링 라이브러리

Styled Component

• 설치
  npm install --save styled-components

CSS의 문제점 (in React)

• global namespace
  글로벌 변수를 지양해야하는 js와 대치

• dependencies
  css 간의 의존 관리

• dead code elimination
  안 쓰는 css 인지가 어려움

• minification
  클래스 이름 최소화

• sharing constants
  js의 코드와 값을 공유하고 싶음

• non-deterministic resolution
  css 파일 로드 타이밍 이슈

• isolation
  격리

-> 그래서 나온 것이 CSS in JS (styled component)
스타일을 style 태그로 분리!

styled.{element} ``

&

가상 엘리먼트 / 가상 선택자
자기 자신을 특정할 수 있다.
나를 기준으로 다른 요소들을 선택할 수도 있다.

const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
  color: blue;

  // & === Thing

  &:hover {
    color: red; // <Thing> when hovered
  }


  // 일반 형제 결합자
  // 첫 요소를 뒤따르면서 같은 부모를 가진 자식 요소들 
  & ~ & {
    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
  }


  // <Thing> 바로 옆!! 에 있는 요소
  & + & {
    background: lime; // <Thing> next to <Thing>
  }

  // <Thing> 중에 .something 갖는 요소
  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`

global style

전역 스타일

attributes

props addition

keyFrames / ThemeProvider

animation/theme

Emotion

• 설치
  npm install --save @emotion/react

• css props
  jsx를 대체한다.

• composition
  css 안에 css 사용이 가능하다.

기능

fallbacks, &, global, keyframes

Styled-component VS emotion

두 라이브러리가 처음엔 달랐으나 이제 거의 유사해졌다.

사이즈나 속도 면에서 emotion이 좀 더 우세한 듯.

Sass

라이브러리라기 보다는 언어의 느낌이 있다.
전처리기, CSS의 확장이다.

• syntax
  언어처럼 자체 syntax가 있다.

• interpolation
  #{} 값을 주입해서 사용할 수 있다. (`${}`) 처럼

values, functions 를 사용해서 프로그래밍 언어스럽다.

npm trends