[react] CSS-in-JS 관련 라이브러리 Styled Component

Styled Component 정의

React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 만들어졌다.

styled Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다.

 

styled Component 

1. Automatic critical CSS :

화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입된다.

2. No class name bugs :

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

3.Easier deletion of CSS : 

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

4. Simple dynamic styling : 

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

5. Painless maintenance :

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

6. Automatic vendor prefixing :

개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐이다. 나머진 알아서 해준다.

 

기본형태

기존 형태는 다음과 같다.

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

스타일 속성은 안에 그대로 쓰되, 첫 줄과 마지막 줄에 저런 형식을 사용해야한다.

 

설치 방법 

Styled Component 의 설치는 간단하다. 두가지 방법이 있다.

첫번째 방법
$ npm install --save styled-components 
를 치면 된다.

두번째 방법
$ yarn add styled-components
yarn이 설치되어 있다면 사용 가능!

Styled Component 에서는 package.json에 다음 코드를 추가하도록 권장하고 있다. 밑에 코드를 추가하면 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄여준다.

{
    "resolutions": {
          "styled-components": "^5"
      }
}

 

베이식 룰

Passed props

컴포넌트에 props 로 스타일 속성이 전달된다면 해당 컴포넌트는 props 로 전달된 속성을 우선 적용하며, 전달되는 속성이 없다면 기본으로 설정된 속성을 적용한다.

https://styled-components.com/docs/basics#passed-props

styled-components: Basics

 

Adapting based on props & Extending Styles

스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 를 사용할 수 있다.

또한 같은 스타일 속성을 지닌 여러개의 컴포넌트들 중 몇 개의 컴포넌트에는 약간의 변화를 주고 싶은 경우 다음과 같이 코드를 만들면된다.

https://styled-components.com/docs/basics#adapting-based-on-props

styled-components: Basics