Styled-Components란?

styled-component란 별도의 CSS파일을 생성할 필요없이 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.

왜 styled-components인가

Component가 많을 경우 class명이 중복될 수 있는 문제가 발생할 수 있다. 이를 방지하기 위해 별도의 class 선언 없이 component에 CSS를 직접 선언해주는 방식을 사용하면 component간에 중복이 발생하는 것을 막을 수 있다.

1. 설치 및 import

$ npm install --save styled-components

import styled from 'styled-components';

2. 사용하기

const 이름 = styled.div`
	display : flex;
	justifycontent : center;
	align-items : center;
`;

<이름 />

스타일링을 원하는 태그명을 변수로 작성하고 styled.태그 뒤에 백틱을 넣어준 뒤 그 안에 원하는 CSS 스타일링을 하고 컴포넌트를 사용할때와 같이 사용한다.

3. props 이용하기

const [Show, setShow] = useState(false);

<div show={Show} />


const Div = styled.div`
    font-size: 25px;
    color: blue;
${({ show }) => {
    return show ? null : `display: none`;
  }};
`

이것 처럼 태그에서 props로 넘겨준 값을 이용하여 styled-components안에서 특정 스타일링을 하거나 if문이나 삼항연산자를 이용하여 다른 스타일값으로 변경해줄 수 있다.
아직 어색한 방법이지만 꼭 필요한 방법이므로 하루빨리 익숙해지도록 하자...!

4. Extending Styles

기존의 스타일링된 컴포넌트를 Extend해서 사용할 수 있다. 3번에서 사용했던 Div라는 styled-component를 extend해서 사용하려면

const NewDiv = styled(Div)`
	color : orange;
`;

이런식으로 extend해서 기존에 스타일링 된 컴포넌트를 기본값으로 한채 특정 스타일만 변경해서 사용할 수 있다.

5. nesting

sass와 마찬가지로 styled-component역시 nesting 기능을 제공한다. 적절히 사용한다면 모든 컴포넌트를 styled-component화 시키지 않더라도 충분히 스타일링 할 수 있다.

6. Global Style

Sass에서 사용하는 common.scss와 reset.scss의 역할을 styled-components에서는 GlobalStyle과 theme가 한다.
GlobalStyle.js파일과 theme.js 파일을 만들어 styles 폴더 밑에 만들어주고 index.js 파일에 import하여 사용한다. 각 컴포넌트에서 미리 설정해둔 common css는

color: ${(props) => props.theme.colors.grayColor};

다음처럼 props를 이용하여 쉽게 불러와서 사용할 수 있다.