[React.js] CSS-in-JS (Styled-components)에 대하여

❓ CSS-in-JS

CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.

대표적으로는 styled-components, emotion 등의 라이브러리가 있으며, 이것을 import하여 활용한다.

기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세다. 특히 이러한 부분 때문에 CSS-in-JS가 더욱 각광받고 있다.

 

✔ CSS-in-JS의 장점

• CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성)
• JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다. 예를 들어, React에서는 props를 활용한 조건부 스타일링이 가능하다.
• 정의되는 JS파일에만 종속되기 때문에 다른 JS 파일을 오염시키지 않는다.
• CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다.

✔CSS-in-JS의 단점

• 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다.
• 생성한 컴포넌트가 일반적인으로 생성한 컴포넌트인지 styled-components를 활용하여 생성한 styled-componentsd인지 헷갈릴 수 있다.
  • 이렇게 된다면 해당 컴포넌트를 수정할 때 CSS파일에서 스타일을 수정해야할지 js파일에서 수정해야할지 확인해야하는 번거로움이 생길것이다.
• 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.
• 중복되는 스타일을 가진 컴포넌트는 import/export해서 사용해야할텐데 그럼 CSS랑 다를바가 없다.

---

❗ styled-components 설치

이 번 포스팅은 styled에 대하여 알아보겠다.

먼저 styled-components를 install하자

npm install styled-components

그리고 styled-components를 js파일 최상단에 import하면 된다

import styled from 'styled-components'

이렇게 된다면 환경셋팅은 모두 끝이났다.

 

❗ styled-components 사용법

본격적으로 사용 방법에 대해 알아보자.

 

먼저 노란색 버튼을 하나 만드는 예시를 알아보겠다.

let Yellowbtn = styled.button`
 background : yellow;
 color : black;
 padding : 10px
`

이렇게 styled.{     } 괄호안에 어떤 HTML 태그를 생성해줄지 정의하고 

백틱(`) 사이에 원하는 스타일을 지정해주면 된다.

그리고 평소에 컴포넌트를 호출하던대로

<Yellowbtn/>

끝. 간단하다

 

❗ styled-components 재활용

위에서는 고정적인 스타일을 가진 버튼을 만드는 방법을 알아봤다면

이 번엔 재활용 가능한 컴포넌트 생성법에 대해서 알아보자.

간단하다.

let Createbtn = styled.button`
 background : ${ props => props.bg };
 color : black;
 padding : 10px
`

앞서 포스팅했던 props를 활용하면 된다.

<Createbtn bg = "red"> 버튼 </Createbtn>
<Createbtn bg = "blue"> 버튼 </Createbtn>
<Createbtn bg = "greed"> 버튼 </Createbtn>

재활용 가능한 컴포넌트를 활용하여 3가지 색상을 가진 버튼을 만들었다 ! 

 

그런데 파란색 버튼에 검정색 폰트를 쓴다면 폰트가 보이지 않을것이다.

그럴 때는

let Createbtn = styled.button`
 background : ${ props => props.bg};
 color : ${ props => props.bg == 'blue' ? 'white' : 'black'};
 padding : 10px
`

버튼의 색상이 blue면 폰트의 컬러는 white, 버튼의 색상이 blue가 아니면 폰트의 컬러는 black 으로 지정하게끔 사용할 수도 있다.

 

그리고 추가적으로 

Createbtn의 스타일은 그대로 가져오지만 padding값이 50px인 버튼을 복사하려고 할 때는

let Createbtn = styled.button`
 background : ${ props => props.bg};
 color : ${ props => props.bg == 'blue' ? 'white' : 'black'};
 padding : 10px
`

let Createbtn_copy = styled(Createbtn)`
  padding: 50px;
`;

이렇게 새로운 컴포넌트를 정의하고 styled(복사하려는 컴포넌트)를 넣어주면 된다

그러면 기존 컴포넌트에서 기존 값을 변경해서 쓸 수 있을것이고 기존 값에다가 추가적인 스타일을 정의하여 복사 후 사용할 수도 있을것이다.

끝.