스타일링 라이브러리

---

CSS의 문제점 (React를 쓰면서)

• Global Namespace: 글로벌 변수를 지양해야 하는 JS와 대치
• Dependencies: css 간의 의존 관리
• Dead Code Elimination: 안 쓰는 css 인지 어려움
• Minification: 클래스 이름 최소화
• Sharing Constants: JS의 코드와 값을 공유하고 싶음
• Non-deterministic Resolution: css 파일 로드 타이밍 이슈
• Isolation: 격리
  
  

Styled-Components

---

https://styled-components.com/

npm insatll --save styled-components

상태가 바뀌거나 훅이 바뀌는 등의 이유로 컴포넌트는 리렌더링이 될텐데, 이 내부에 styled-components를 넣게 되면 이마저도 계속 새로 그려질 것이다.
따라서, 재사용성과 속도 측면에서 보았을 때 밖으로 빼는 게 좋다.

'&' 자기 자신을 의미한다. 나를 특정할 수 있다.
'& ~ &' Thing 주변에 Thing이 하나라도
'& + &' <a>라는 태그 바로 옆의 <b>태그를 의미한다.

정리

emotion

---

https://emotion.sh/docs/introduction

npm i @emotion/styled @emotion/react

CRA를 사용하는 경우

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

• auto vendor-prefix/nested selectors/media queries
• SSR with zero configuration
• CSS Props
  • Object Styles: css={{fontSize: 12}}
  • String Styles: css={css`font-size: 12px`}
• Styled Components: styled-components와 유사한 +@ 기능 제공
• Composing dynamic styles
• as prop
• Nesting components
• Fallbacks
  어떤 문제가 생겼을 때 보여줄 기본값, 복구해줄 값을 뜻한다.
  스타일은 대개 모든 브라우저에서 동일하게 작동하지 않는다.
  background의 값을 배열로 넣으면, linear-gradient가 지원되는 브라우저에서는 배경색이 그라데이션으로, 지원되지 않는 브라우저에서는 red로 나오게 되는 것이다.

    <div
      css={{
        background: [
          'red',
          'linear-gradient(#e66465, #9198e5)'
        ],
        height: 100
      }}
    >

  
  

정리

Sass

---

https://sass-lang.com/

• CSS를 확장하는 Preprocessing
• 프로젝트가 커지고 복잡해질수록 관리는 힘들어진다.
• Nesting/Mixins/Inheritance...
  
  

npm install sass

정리