styled-components 기초

styled-components는 가장 널리 사용되고 있는 CSS-in-JS 라이브러리입니다.

먼저 CSS-in-JS를 알아보겠습니다.

CSS-in-JS

CSS-in-JS란 말 그대로 JavaScript 코드에서 CSS를 작성하는 방법을 말한다.

기존에는 웹 사이트를 개발할 때 HTML, CSS, JS 파일을 별도로 각각 나눠 개발을 하는 것이 가장 좋은 방법으로 여겨졌습니다. 하지만 SPA(React, Vue, Angular) 라이브러리가 인기를 끌면서 웹 개발의 패러다임이 많이 바뀌게 되었습니다.

이로 인해 HTML, CSS, JS 파일을 따로 분리하는 것이 아닌 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JS를 전부 넣는 방식이 많이 사용되고 있습니다.

React에서는 JSX 문법을 사용해서 컴포넌트를 만드는데 JavaScript와 HTML을 한 파일안에서 코드를 작성하게되고, CSS-in-JS 방식의 라이브러리를 사용하면 CSS도 JSX 문법 내에서 편리하게 사용할 수 있습니다.

설치하기

styled-components는 npm과 yarn을 이용하여 간단하게 설치가 가능합니다.

// npm 사용
npm install styled-components

// yarn 사용
yarn add styled-components

설치가 정상적으로 진행 되었는지 확인해보려면 package.json 파일에서 dependencies 안을 확인해보면 확인할 수 있습니다.

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",

시작하기

styled-components는 CSS와 JS를 다뤄보셨던 분이라면 많이 어렵지 않게 시작하실 수 있습니다.

일단 좀 전에 설치했던 styled-components를 불러옵니다.

import styled from 'styled-components'

styled-components를 불러왔다면 이제 그 파일안에서 CSS-in-JS 방식으로 코드를 작성해 봅시다.

import styled from 'styled-components'

const Wrapper = styled.div`
	padding: 4em;
	background-color: deepskyblue;
`

const Title = styled.h1`
	font-size: 2em;
	text-align: center;
	color: #fff;
`

const StyledComponentsExample = () => {
	return (
    	<>
          <Wrapper>
            <Title>Hello, World!</Title>
          </Wrapper>
        </>
    )
}

export default StyledComponentsExample

위의 예제 코드에서 보듯이 styled. 을 선언해주고 그 뒤에 원하는 태그 이름을 넣어줍니다.

그 후 템플릿 리터럴로 감싸서 CSS를 작성해주시면 됩니다.

styled-components는 props를 받아서도 사용이 가능합니다.

const Button = styled.button`
    background-color: ${props => props.primary ? 'deepskyblue' : 'white'};
    color: ${props => props.primary ? 'white' : 'deepskyblue'};
    font-size: 2em;
    margin: 2em;
    padding: 0.5em 2em;
    border: 2px solid deepskyblue;
    border-radius: 3px;
`

const StyledComponentsExample = () => {
	return (
    	<>
      		<Button>Normal</Button>
      		<Button primary>Primary</Button>
      	</>
    )
}

export default StyledComponentsExample

위의 예시 코드처럼 HTML내에서 넘겨준 props를 받아서 삼항연산자를 활용해서 스타일링을 할 수도 있습니다.

const Button = styled.button`
    background-color: ${props => props.primary ? 'deepskyblue' : 'white'};
    color: ${props => props.primary ? 'white' : 'deepskyblue'};
    font-size: 2em;
    margin: 2em;
    padding: 0.5em 2em;
    border: 2px solid deepskyblue;
    border-radius: 3px;
`

const OrangeButton = styled(Button)`
  background-color: ${(props) => (props.primary ? 'orangered' : 'white')};
  color: ${(props) => (props.primary ? 'white' : 'orangered')};
  border: 2px solid orangered;
`

const StyledComponentsExample = () => {
	return (
    	<>
      		<Button>Normal</Button>
      		<Button primary>Primary</Button>
      
      		<OrangeButton>OrangeNormal</OrangeButton>
      		<OrangeButton primary>OrangePrimary</OrangeButton>
      	</>
    )
}

export default StyledComponentsExample

또한 기존의 만들었던 버튼을 베이직 상태로 활용하고 베이직 컴포넌트를 그대로 활용해서 커스텀해서 사용할 수 있습니다.

이상으로 CSS-in-JS 방식의 라이브러리인 styled-componets의 기초 사용법 포스팅을 마치겠습니다.

다음 포스팅에는 styled-componetns의 여러가지 응용 및 심화적인 부분을 다뤄보겠습니다.