[React] Styled-Components 활용

React에서의 CSS

리액트에서 CSS를 적용하는 방법은 여러 가지가 있다.

CSS 파일을 import 하거나 module로 사용할 수도 있고, SASS 같은 전처리기나 tailwind 등의 프레임워크를 이용할 수도 있다.

그중에서 오늘은 Styled-components에 대해서 정리해보려 한다.

Styled-components에 대해서 몰랐던 부분이 많았고,

무엇보다 사용해보니 생각보다 더 편한 라이브러리라는 것을 알게 되었기 때문이다!

 

 

Styled-components

Styled-components는 자바스크립트 안에 CSS를 작성하는 CSS-in-JS 방식이다.

자바스크립트를 이용해서 CSS 코드를 만들어내서 컴포넌트를 꾸밀 수 있다.

이런 CSS-in-JS 방식의 패키지가 Styled-components 뿐인 것은 아니지만,

예전부터 현재까지 많은 개발자들이 사용 중인 패키지다.

실제로 글로벌한 기업들이 많이 사용하고 있기도 하다. (공식 사이트에 따르면!..)

아래는 Styled-components의 공식 사이트다. 공식문서가 있기 때문에 사용 방법 참고 가능!

https://styled-components.com/

styled-components

 

 

 

설치

npm이나 yarn을 통해서 패키지를 설치한다.

npm install --save styled-components

yarn add styled-components

 

 

 

유용한 플러그인

vscode를 에디터로 사용한다면 이 플러그인을 꼭 깔자.. 🥺

이 플러그인의 존재를 알았다면 진작부터 styled-components를 줄기차게 썼을 것 같다.

이 플러그인을 깔지 않는다면, 왼쪽과 같이 자동 완성도.. 무엇도 불가능하며 한 땀 한 땀 css를 작성해야 하는 슬픈 일이 발생한다.

플러그인을 설치하자마자! 오른쪽과 같이 css 파일에서 작성하는 것처럼 css를 유려하게 쓸 수 있다.

 

 

편-안...

다만 css 파일에서 작성할 때와 emmet 단축키 기준은 좀 다른 것 같아 아쉽다. ((혹시 맞출 수 있다면 알려주세요..))

 

 

 

 

 

Styled-components 사용하기

Styled-components의 기본적인 사용 방법은, 꾸밀 컴포넌트를 먼저 만든 뒤 그 안에 CSS를 작성하는 방식이다.

먼저 상단에 styled 키워드를 import 하고,

import styled from 'styled-components';

styled.div 처럼 styled. 태그명과 같이 만들고자 하는 컴포넌트의 html태그를 지정해준다. 어떤 html 태그던 다 가능하다.

그리고 백틱(``) 안에 CSS를 작성하면 된다.

const InputArea = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2rem;
`;

 

이렇게 만든 컴포넌트를 JSX에서 html 태그를 사용하듯 써주면 완료!

<InputArea>
	<InputWrapper>
		<Label htmlFor="title">제목</Label>
		<Input type="text" value={title} placeholder="제목" onChange={(e) => {setTitle(e.target.value);}} />
    </InputWrapper>
</InputArea>

 

 

 

 

Styled-components 활용

조건부 스타일링 가능

CSS-in-JS이기 때문에 if문, switch문, 삼항 연산자 등등을 이용해서 조건에 따라 스타일링을 해줄 수도 있다.

const Box = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
`;

아래와 같이 props를 지정해서 조건부 스타일링을 할 수 있다.

<Box borderColor="red">박스</Box>

 

 

생성한 styled-component 상속받아 재사용

withComponent('html태그')를 통해서 상속받으면서 새로운 컴포넌트를 만들 수 있다.
styled(컴포넌트 이름)만 작성하면 해당 컴포넌트 스타일을 상속 가능.

const Box = styled.div`
  width: 100px;
  height: 100px;
`;

const Button = styled(Box.withComponent('button'))`
  border: none;
  background-color: #aaa;
`;

 

 

SCSS처럼 중첩해서 작성하기

& 연산자를 이용해서 중첩해서 작성이 가능하다.  아래 코드는 Input 컴포넌트이면서 `text` 클래스를 갖고있는 경우에 대해 작성했다.

const Input = styled.input`
  width: 200px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 1rem;

  &.text {
    width: 340px;
  }
`;

 

 

 

전역 스타일링

CSS 작업을 본격적으로 시작하기 전에 normailize.css나 reset.css를 적용하는 경우가 많은데,
createGlobalStyle라는 함수를 통해서 모든 컴포넌트에 적용할 수 있는 스타일을 지정할 수도 있다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
      margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    line-height: 1.7;
  }
`;

export default GlobalStyle;

 

이렇게 생성한 전역 스타일 컴포넌트를 최상위 컴포넌트에 추가해주면 모든 하위 컴포넌트에 적용된다.

import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
  return (
    <>
      <GlobalStyle />
      <Box>
          <Button>버튼</Button>
      </Box>
    </>
  );
}

export default App;

 

 

 

참고

https://hymndev.tistory.com/71
https://www.daleseo.com/styled-components-global-style/