[React] styled-components

📖리액트를 다루는 기술📖을 공부하다가 14장에서 뉴스뷰어를 만드는 부분에서 처음으로 styled-components에 대한 부분이 언급되었다. 이 덕분에 페이지는 이쁘게 완성되었지만 왜 css, sass(scss)를 이용하지않고 styled-components를 사용한 것일까? 이런 궁금증을 얻게 되어 나는 다시 구글링을 시작했다.

 

구글에 "styled-components"를 쳐보았더니 이 웹사이트가 떴다. 스타일드 컴포넌트의 공식 웹사이트인가 보다.

이 사이트에 딱 처음에 들어가자마자 보면 이렇게 쓰여져있다.

 

Visual primitives for the component age? 일단 뭐 비주얼적으로 도와준다는 소리같다

Use the best bits of ES6 and CSS to style your apps without stress? 이 말은 styled-component를 사용하는 코드를 보면 딱 설명이 가능하다.

그렇다면, 일단! 리다기 뉴스뷰어 예제에 들어있는 styled-component코드를 먼저 보면서 얘기해야겠다.

 

const NewsListBlock = styled.div`
    box-sizing: border-box;
    padding-bottom: 3rem;
    width: 768px;
    margin: 0 auto;
    margin-top: 2rem;
    @media screen and (max-width: 768px){
        width: 100%;
        padding-left:1rem;
        padding-right: 1rem;
    }
`;

 

이 코드는 뉴스리스트에서 하나하나마다 블럭에 대해 설정해주고 있는 코드이다.

보면 일단 const NewsListBlock = 이건 뭐 앞을 구르고 뒤를 구르면서 봐도 자바스크립트 문법이다.

여기서  = styled.div` 이부분에 style. 뒤에 있는 div 이거는 html태그 문법이다. 

그리고 ``; 이 부분 안에는 이 부분을 꾸며주고 설정해주는 css문법으로 가득차있다.

 

자 그러면 Use the best bits of ES6 and CSS to style your apps without stress 위에 이렇게 써져있던 설명이 뭔가 이해가 되는가?

자바스크립트, css 문법을 다 포함해서 쓸 수 있게 해줘서 편리하다는 것 같다.

일단 여기까지만 간단히 이해해보고 공식 사이트의 Documentation부분에 들어가봤더니 Motivation이라고 써져있는 부분을 클릭했더니 내가 찾던 왜 굳이굳이 사람들이 styled-components를 사용하는지에 대한 내용이 상세하게 적혀있었다.

 

• Automatic critical CSS : 일단 이건 불필요한 코드 페이지 로딩을 줄여준다는 얘기다. 보통 해당 js파일에 들어갈 css코드들을 따로 css파일을 만들어서 적는데, styled-components는 그럴 필요 없이 한 페이지 안에 컴포넌트별로 따로따로 설정할 수 있게 만들어줬다는 것이다.
• No class name bugs : 컴포넌트를 만들면서 그 즉시 스타일을 같이 설정해주는 것이기 때문에 다른 것들과 충돌하지 않게 된다는 점
• Easier deletion of CSS : 이것도 컴포넌트를 만들면서 스타일을 같이 설정해주기 때문에 보기도 편하고 지우기도 편하고 수정하기도 편하다는 것
• Simple dynamic styling : JS에서 사용되는 그런 dynamic property들을 안에 global theme과 global variable을 사용해 css로 설정해줘서 다르게 실행될 수 있도록 수정할 수 있다는 점
• Painless maintenance : 위에서 말했던 것과 동일하게 css파일, js파일 이렇게 따로따로 필요하지 않기 때문에 유지보수하는데도 간편해진다.
• Automatic vendor prefixing : 아니면 공통적으로 쓰이는 css코드들을 따로 css파일에 써두고, 그것을 styled-components를 사용해서 컴포넌트 별로 응용해서 사용할 수 있게끔 쓸 수 있다.

 

이렇게 하나하나보니 아 왜 개발자들이 styled-components를 사용하는지 확실히 이해하게 되었다.

 

styled-components 패키지 설치 방법

$ npm install --save styled-components

$ yarn add styled-components
//둘 중 아무거나 써도 상관없다.
//꼭 설치하고 package.json에 잘 설치가 되었는지 확인해보자

 

 

---

다 정리해놓고보니 벨로퍼트님이 css, scss, styled-components를 종류별로 정리해놓은 포스트를 발견하였다.

velog.io/@velopert/react-component-styling

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components

이 포스트는 각각의 예제도 포함되어있으니 아직 헷갈리는 분들이 읽으면 좋을 것 같다.