[React] why use styled component?

Style Component:

styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다.

 

2차 프로젝트를 진행하면서 기존 사용하던 scss가 아닌 styled component를 적용하여 진행하게 되었다.

 

- 스타일 컴포넌트 사용하는 이유.

먼저 스타일을 적응하는 방법

1. 외부 CSS 파일에 CSS코드를 작성하여 className으로 속성을 전달

- 규모가 커질수록 css 부피가 커진다. sass를 적용하면 조금 나아지지만 그래도 부피가 너무 크다.

 

2. inline CSS를 react component 에 삽입

- 인라인 스타일은  미디어 쿼리를 사용할 수 없고, 브라우저 호환성, camelCasing 및 automatically appended scalar quantities 에 대한 많은 우려로 인해 인라인 스타일을 사용해서는 안됩니다.

- 리액트팀에서 권장하지 않는다.

 

3. CSS-in-JS

CSS-in-JS는 Javascript를 사용하여 컴포넌트의 스타일을 지정하는 기술이고, Javascript에서 구분이 분석되면 그때 CSS가 스타일 요소로 생성되어서 DOM위에 직접 부여되는 방식을 가집니다.

다양한 CSS-in-JS 라이브러리가 있고 그중에 styled component가 가장 유명하며 사용자가 많다.

 

컴포넌트 자체로 사용하기 때문에 더욱 직관적으로 코드를 볼 수 있습니다.

 

 

1. 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.

-  style과 component간의 매핑이 제거됨 (style이 component의 필수 부분이 됨)

 

3. 모바일 지원

- React Native로 모바일 개발을 할 때, 재사용할 수 있다!

 

4. 스코프

- 해당 컴포넌트에 대해서의 스타일만을 정의하므로, 스타일 적용범위가 한정적이라서 사이드 이펙트 확률이 줄어든다.

 

5. No-class policy가 가능

 

6. 서버사이드 렌더링

 

7. 단위 테스팅

- styled-component도 실제 컴포넌트이기 때문에 단위 테스트를 수행할 수 있습니다!

(https://github.com/styled-components/jest-styled-components)

 

8. SASS처럼 네스팅, mixin 등 사용이 가능하다.

 

 

9. 유명하다 (인기많고 안정적이다.)

- 모든 리액트 개발자는 알고 있을 정도로 자주쓰인다.

 

10. attribute 추가가 가능, 스타일에 props를 적용 할 수 있다

 

11. styled component icon을 이용하여 폰트어썸처럼 이용할 수 있다.

https://styled-icons.dev/

 

설치방법
npm install --save styled-components

 

사용방법

• 상단에 import를 해준다
• 컴포넌트 생성
• 하단에 styled와 태그를 선언

import styled from 'styled-components';

const 스타일컴포넌트테스트 = () => {
return(
   <스타일컴포넌트>
      <Test>test</Test>
      <Test>test</Test>
   </스타일컴포넌트>
  )
}

const 스타일컴포넌트 = styled.div`
  display: flex;
  align-items: flex-end;
`;

 

 

mixin 사용

공통으로 사용될 theme.js 생성하고 mixin, variables를 선언해준다.

스타일 컴포넌트에 ${props => props.theme. (mixin)} 를 입력해주면 된다. 또는 구조분해 할당으로 전달해주면 더욱 깔끔하다.

${({theme}) => theme.fontSemiLarge }

 

 

attrs

태그들의 속성들도 전달이 가능하다.

 

const Input = styled.input.attrs(props => ({
  type: 'text',
  size: props.small ? 5 : undefined,
}))`
  border-radius: 3px;
  border: 1px solid palevioletred;
  display: block;
  margin: 0 0 1em;
  padding: ${props => props.padding};

  ::placeholder {
    color: palevioletred;
  }
`

 

프로젝트 초기세팅을 진행하면서 처음 사용하는 스타일 컴포넌트로 mixin, font, variables를 적용하면서 다소 시간이 소요되었지만 

프로젝트 내에 css 파일을 더욱 가볍게 관리할 수 있어서 좋았읍니다.

 

아직 처음써보는 중이라 단점에 대해서는 파악을 못하였는데 계속 사용해보면서 추가로 블로그를 써야겠다. 

 

 

 

 

참고:

https://zereight.tistory.com/922 

https://styled-components.com