왜 styled-component를 사용하셨나요?

나는 react로 프로그래밍을 할 때 styled-component (emotion)같은 CSS-in-JS 라이브러리를 사용하여 프로그래밍을 했다.

 

그 이유는 https://blog.logrocket.com/8-reasons-to-use-styled-components-cf3788f0bb4d/ 에 자세히 설명되어있고, 이 아티클을 인용하여 글을 작성한다.

 

React에서 컴포넌트에 스타일링을 하는 방법은 다음과 같다. 

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

2. inline CSS를 react component 안에 넣기

3. CSS-in-JS

 

 

 

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

=> 대규모 어플리케이션 프로젝트의 경우에는 CSS파일의 부피가 커지고, 복잡해질 수 있다.

 

그럼 SASS를 사용하자! 

=> 그나마 도움이 되나, 프로젝트가 가질 수 있는 엄청난 수의 CSS파일들과 같아지고 그 자체로 복잡해질 수 있다.

 

아무튼 규모가 커지면 CSS코드가 복잡해진다.

 

2. inline CSS를 react component 안에 넣기

<div style={myStyle}></div>

 

위와 같은 코드는 React에서 지속성과 확장성이 떨어지므로 권장하지 않는다.

리액트에서도 권장하지 않는다는데... 출처는 위 블로그에서 소개하지 않고 있다.

 

아무튼 inline-style은 가상선택자, 미디어 쿼리를 사용할 수 없고 (emotion css 사용하면 가능)

브라우저 호환성, 카멜케이싱, automatically appended scalar quantities(이건 뭐지?) 등에 대한 우려로 사용해서는 안된다고 한다.

 

예를 들어서

const paragraphStyles = {
  color: red,
  backgroundColor: black,
  padding: 2px
}
<p style={paragraphStyles}> inline styles applied here </p>

위 코드는

<p style="color: red; background-color: black;">inline styles applied here </p>

로 컴파일 되고

 

import styled from 'styled-components';
  const Text = styled.div`
  color: red,
  background: black
`
<Text>Styled with CSS-in-JS </Text>

위의 styled-component는

<style>
  .hash12345tf {
  background-color: black;
  color: red;
}
</style>
<p class="hash12345tf">Styled with CSS-in-JS</p>

으로 컴파일 된다.

 

즉, styled-component는 인라인 스타일링을 했을때의 우선순위 변경을 막을 수 있다.

 

3. CSS-in-JS

세상에는 참 다양한 CSS-in-JS 라이브러리가 있고 여기서 확인할 수 있다. (https://michelebertoli.github.io/css-in-js/)

가장 유명한건 styled-component이다! (https://www.npmtrends.com/jss-vs-aphrodite-vs-radium-vs-styled-components-vs-glamorous-vs-emotion-vs-styletron)

 

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

 

CSS-in-JS를 사용해야하는 이유

 

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

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

 

2) 인라인 스타일링의 단점

=> 위에서 자세하게 설명했다.

 

3) 모바일 지원

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

 

4) 스코프

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

 

5) No-class policy가 가능

 

6) 서버사이드 렌더링

 

7) 단위 테스팅

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

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

 

8) SASS도 적용가능!

 

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

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