스타일 라이브러리

영상 강의를 시청하며 글을 읽고 실습하면 더욱 효과적입니다.

Styled Components 라이브러리를 사용하면 CSS 스타일을 추상화 한 JavaScript 객체 대신 CSS 스타일 문법을 그대로 사용할 수 있습니다. React에서도, React Native에서도 활용할 수 있습니다.

모티베이션

Styled Components 라이브러리는 React 컴포넌트 시스템 구조에서 CSS를 보다 효율적으로 작성하기 위한 결과물입니다. Single Use Case에 중점을 두고 최종 사용자와 개발자를 위한 최적의 경험을 제공합니다. Styled Components는 아래 나열된 기능을 제공합니다.

---

CSS → JavaScript 자동 변경
Styled Components는 렌더링 되는 컴포넌트를 추적해 CSS로 작성된 스타일을 React에서 처리 가능한 JS 스타일 객체로 변경합니다.

const Para = styled.p`
  background-color: #3d5afe
`

// ⬇︎

<Para style={{ backgroundColor: '#3d5afe' }}> ... </Para>

---

고유한 class 속성 설정
Styled Components는 렌더링 될 때, DOM 요소에 고유한 class 속성 이름을 설정합니다.

<div class="sc-htpNat sc-bxivhb iSlcij"> ... </div>

---

컴포넌트에서 CSS 관리
Styled Components는 스타일이 특정 컴포넌트에 묶여 있어, 컴포넌트를 사용하지 않을 경우 불 필요한 스타일 코드가 남아있지 않습니다. 즉, 사용된 컴포넌트 스타일 코드만 렌더링 과정에서 처리됩니다.

const AppButton = styld.button`
  background: transparent;
  color: #0a6cff;
`

// 컴포넌트가 사용되지 않으면 설정된 스타일도 처리 ✘
{/*<AppButton></AppButton>*/}

---

간편한 동적 스타일링
props 또는 theme 속성을 사용해 컴포넌트 외부에서 스타일을 관리하는 것은, 수십 개의 CSS 클래스를 손수 관리 할 필요가 없습니다. 컴포넌트 외부에서 손쉽게 동적으로 스타일을 관리할 수 있습니다.

<AppButton
  theme={{ primary: "#f10e60" }}
  disabled={this.state.isSubmiting}
>
  ...
</AppButton>

---

용이한 유지 보수
컴포넌트에 영향을 미치는 스타일을 찾기 위해 여러 파일을 검색 할 필요가 없으므로 코드 베이스의 크기에 관계없이 유지 보수가 용이합니다.

// 컴포넌트가 포함된 모듈 파일을 열어 포함하는 스타일 관리

const AppButton = styld.button`
  background: transparent;
  color: #0a6cff;
`

---

벤더 프리픽스 자동 설정
브라우저 벤더 프리픽스(-webkit-, -moz-, -ms- 등)로 스트레스 받을 필요가 없습니다. CSS 표준 문법만 사용하면 됩니다. Styled Components는 자동으로 처리합니다.

const AppButton = styld.button`
  appearance: none;
`

// ⬇︎

<AppButton={{
  webkitAppearance: 'none',
  mozAppearance: 'none',
  appearance: 'none',
}}>
  ...
</AppButton>

라이브러리 설치

styled-components (opens new window) 라이브러리를 프로젝트에 설치합니다.

$ yarn add styled-components
# 또는 npm i styled-components

Babel 플러그인

프로젝트 루트 위치의 babel.config.js 파일에 babel-plugin-styled-components (opens new window) 플러그인을 추가합니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['babel-plugin-styled-components'],
}

참고

Styled Component Installation (opens new window) 공식 문서를 참고하세요.

영상 강의