Styled-Components

🚩Styled-Components

리액트 환경에서 사용 가능한 Styled Component는 CSS-in-JS가 대두되며 함께 등장한 라이브러리입니다. 기존까지 HTML, CSS, JS 파일로 쪼개 개발하던 방식이 리액트의 등장으로 컴포넌트 단위 개발로 바뀌었으나, 아직까지도 CSS는 그렇게 컴포넌트화 되지 못했다는 점에서 출발한 개념입니다.

CSS-in-JS 라이브러리를 사용하면 CSS까지 자바 스크립트 안에 넣어줄 수 있습니다. 즉, HTML + JS + CSS가 전부 하나의 자바스크립트 파일 안에서 '컴포넌트 단위로' 개발할 수 있다는 뜻입니다. 물론 이를 위해 다양한 라이브러리가 있지만 현재 가장 인기 있는 라이브러리는 Styled Components입니다. 

 

이게 전부 하나로?!

# with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

위와 같은 코드를 터미널에 입력해서 설치를 해줄 수 있는데요. npm을 쓰는지 yarn을 쓰는지에 따라 다르게 깔아주시면 될 것 같습니다. 이후 package.json에는 아래와 같은 코드를 추가하면 됩니다.

 

{
  "resolutions": {
    "styled-components": "^5"
  }
}

마지막으로, Styled Components 를 쓰고 싶은 파일에 아래처럼 import를 해주면 완료입니다.

import styled from "styled-components"

 

 

Styled Componets를 잘 쓰기 위해서는 문법을 알아야 합니다.

1) 컴포넌트를 만들기 위해 따옴표가 아닌 백틱(`)을 사용하기

파란색 배경의 버튼을 하나 만들어봅시다.

const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용하면 됩니다.
  return <BlueButton>Blue Button</BlueButton>;
}

우선 컴포넌트를 선언하고, styled.태그종류를 할당한 뒤, 백틱 내부에 기존 CSS 문법 그대로 스타일을 지정해줍니다. 그 뒤 만들어둔 컴포넌트를 기존 리액트 컴포넌트 사용하듯이 리턴문 내부에 작성하면 됩니다.

 

2) 컴포넌트 재활용해서 새 컴포넌트 만들기

그렇다면 아까 만들어둔 파란 버튼을 재활용 해서 다른 버튼들을 만들 수도 있지 않을까요? 

styled.태그종류가 아닌 styled(재활용할 컴포넌트)를 통해 기존 컴포넌트를 다른 스타일로 바꿔 사용할 수 있습니다.

const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

//만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있습니다.
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

//재활용한 컴포넌트를 재활용할 수도 있습니다.
const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;

export default function App() {
  return (
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
      <br />
      <BigRedButton>Big Red Button</BigRedButton>
    </>
  );
}

 

3) Props 활용하기

Styled Component로 만든 컴포넌트 역시, 리액트 컴포넌트처럼 Props를 내릴 수 있습니다. 

const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
    </>
  );
}

이처럼 백틱 내부에 props를 내려주고, 내린 props의 값에 따라 렌더링 합니다. 또한 템플릿 리터럴 문법인 ${}로 JS코드를 사용할 수 있습니다. Button1은 props가 skyblue로 되어 있어서 배경색이 skyblue가 되었습니다.

이를 활용해서, 다음처럼 통째로 사용할 수도 있습니다. props에 color이 존재할 때에는 그 색 그대로 배경색을 채우고, 아닐 때에는 white로 둡니다. 삼항 조건문을 사용한 결과입니다. 

 

//받아온 prop 값을 그대로 이용해 렌더링할 수도 있습니다
const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있습니다.
const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button2>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

 

4) 전역 스타일 설정

전역 스타일을 설정하고 싶다면 createGlobalStyle함수를 불러오면 됩니다. 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`

만들어진 GlobalStyle컴포넌트는 최상위 컴포넌트에서 사용해줄 시 전역에서 이 컴포넌트의 스타일이 적용됩니다. 

 

---

추가 팁 : Styled Components를 사용할 때는 VSCode에서 코드 작성 시 CSS 파일에서 작성하는 것처럼 자동 완성 기능을 사용할 수 없습니다. 이럴 때 도움 되는 것이 VSCode-Styled-Components라는 익스텐션입니다.

이렇게 생김

설치 후 다시 확인해보면, Styled-Components 코드 작성 시 자동 완성 기능을 잘 사용할 수 있는 것을 볼 수 있습니다. 만약 작동하지 않는다면 1.7.5버전으로 다시 깔아보세요. 

 

 

활용: Styled-Components 로 hover을 걸고 싶을 때는 아래와 같이 사용하면 됩니다.

import styled from "styled-components";
const Button = styled.button`
  &:hover{  
    background-color : skyblue;
    color : blue
  }