CDD의 대표 도구 Styled Components

🏁 Styled Components

CSS 코드를 다룰 때 다양한 불편함이 있는데 이를 컴포넌트화 시켜 해결해주는 라이브러리가 있다.
⇒ React 환경에서 사용 가능한 Styled Components 라는 라이브러리

CSS in JS 라는 개념에서 나온 라이브러리
기존의 HTML, CSS, JS 를 나눠서 개발하던 방법 (React 등의 라이브러리 등장으로 컴포넌트 단위 개발이 주류가 되었지만 CSS는 그렇지 못했다 라는 점에서 출발한 개념)

CSS in JS 를 사용하면 CSS도 쉽게 JS 안에 넣어줄 수 있으니 HTML, CSS, JS를 묶어서 하나의 JS 파일 안에서 컴포넌트 단위로 개발할 수 있다.

➰ Styled Components 설치

1. 터미널에서 npm install --save styled-components 로 설치
2. package.json 에 아래 코드 추가

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

3. Styled Components 를 사용할 파일로 불러와주면 사용 준비 완료

import styled from "styled-components"

---

Styled Components 문법

➰ 컴포넌트 만들기

백틱을 사용해 컴포넌트를 선언한 후 styled.태그종류 를 할당하고, 백틱 안에 기존에 CSS를 작성하던 문법과 똑같이 스타일 속성 작성해주면 됨

const 컴포넌트이름 = styled.태그종류`
	CSS속성1: 속성값;
	CSS속성2: 속성값;
`
****
const BluButton = styled.button`
	background-color: blue;
    color: white;
`

---

➰ 컴포넌트 재활용해서 새로운 컴포넌트 만들기

이미 만들어진 컴포넌트를 재활용해서 새로운 컴포넌트를 만들 수도 있다.
컴포넌트를 선언하고 styled() 에 재활용할 컴포넌트를 전달해준 다음, 추가하고 싶은 스타일 속성을 작성하기

const 컴포넌트이름 = styled(재활용할 커포넌트)`
	추가할 CSS속성1: 속성값;
	추가할 CSS속성2: 속성값;
`
****
// 만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있다.
const BigBlueButton = styled(BlueButton)`
	padding: 10px;
    margin-top: 10px;
`;

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

---

➰ Props 활용하기

Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다.
내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능.

템플릿리터럴문법${} 으로 JS코드를 사용할 수 있다.
props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 된다.

const 컴포넌트이름 = styled.태그종류`
  CSS속성:${(props) => 함수 코드}
`;

1. Props로 조건부 렌더링하기

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

삼항연산자 사용해 <Button> 컴포넌트에 skyblue 라는 props가 있는지 확인하고 있으면 배경색을 skyblue 로, 없으면 white 로 지정해주는 코드

Button1의 경우 skyblue라는 props가 있어 배경색이 skyblue 로 지정됐고, Button2 의 경우는 props가 아예 없어 배경색이 white 로 지정된 것을 확인할 수 있다.

import styled from "styled-components";

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

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

2. Props 값으로 렌더링하기
Props값을 통째로 활용해 컴포넌트 렌더링에 활용할 수 있다.
삼항연산자를 사용하거나, 논리합|| 을 사용할 수 있다.

// 받아온 props 값을 그대로 이용해 렌더링 하기
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">Button 1</Button1>
      <Button1 color="tomato">Button 1</Button1>
      <br/>
      <Button2>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

---

➰ 전역 스타일 설정하기

전역에 스타일을 설정하고 싶을 때는 Styled-Components 에서 createGlobalStyle 함수를 불러온다 ⇒ import { createGlobalStyle } from "style-components"

이 함수 이용해 CSS파일에 작성하듯 설정해주고 싶은 스타일 작성

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

만들어진 <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용해주면 전역 <GlobalStyle> 컴포넌트의 스타일이 적용된다.

function App() {
  return (
    <>
      <GlobalStyle />
      <Button>전역 스타일 적용하기</Button>
    </>
  )
}