React에서 보다 구조적으로 코드를 작성하기 위한 Styled Components

CDD란??

CDD란 component-Driven Development의 약자로 레고처럼 부품 단위로 UI 컴포넌트를 만들어서 결합하는 개발 방법을 의미한다.

CDD 개발 방법의 장점을 이야기해보자. 예를들어서 개발자와 디자이너가 협력하여 하나의 페이지를 만들었다. 그런데 기획자가 와서 새로운 요청사항을 전달했는데 이전에 사용되었던 버튼과 동일한 기능을 하는 버튼이 요청사항에 포함되어 있었다.
이때 이 버튼을 컴포넌트화 하여 새로운 버튼에도 사용을 하다면 작업을 굉장히 효율적으로 할 수 있다.

CSS in JavaScript

Styled Components

Styled Components란??

CSS를 다루다보면 class나 id이름을 짓기 힘들거나, CSS파일 내에서 내가 원하는 부분을 찾기 힘들거나, 속성이 겹쳐서 내가 원하는 결과가 나오지 않는 등 여러 문제를 겪는다.

Styled Components 라이브러리는 React에서 사용이 가능하며 위의 문제들을 해결해주기 위해서 CSS를 컴포넌트화 시켜준다.

라이브러리 설치

$ npm install --save styled-components

여러 버전의 Styled Components가 설치되는 것을 방지하기 위해서 package.json에 다음 코드를 추가하도록 권장하고 있다.

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

다 끝났다면 사용할 파일로 불러와서 사용하면 된다.

import styled from "styled-components"

Styled Components 문법

1. 컴포넌트 만들기

styled component는 템플릿 리터럴 문법을 따르기 때문에 백 틱을 사용한다.

const {{컴포넌트이름}} = styled.{{태그종류}}`
	background-color : blue;
	color : white;
`;

예시

import styled from "styled-components";

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

export default function App() {
  return <BlueButton>Blue Button</BlueButton>;
}

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

기존의 styled 컴포넌트를 재활용하여 사용할 수도 있다.

const {{컴포넌트이름}} = styled( {{재사용할 컴포넌트}} )`
	padding : 10px;
	margin-top : 10px;
`

ex

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;
`;

3. Props 활용하기

Styled 컴포넌트도 기존의 컴포넌트처럼 props를 사용할 수 있다.

const {{컴포넌트 이름}} = styled.{{태그종류}}`
	background-color : ${(props) => 함수코드}
`

ex1. 조건부 렌더링하기

// Button 컴포넌트에 skyblue prop이 있다면 배경색이 skyblue가 되고 아니라면 흰색.
const Button = styled.button`
	background-color : ${(props) => props.skyblue ? "skyblue" : "white"}
`;

return (
  <div>
  	<Button skyblue>Button1</Button>
  	<Button>Button1</Button>
  </div>
)

ex2.Props값으로 렌더링하기

const Button = styled.button`
	background-color : ${(props)=> props.color || "white"}
`;
<Button>Button1</Button>
<Button color="pink">Button2</Button>
<Button color="skyblue">Button3</Button>

4. 전역 스타일 설정하기

전역 스타일을 설정하기 위해서는 Styled Components에서 createGlobalStyle을 함수로 불러와야한다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
		margin : 2px;
		border-radius : 5px;
	}
`
export default function App () {
  return (
    <>
    	<GlobalStyle/> // 컴포넌트 최상단에서 전역 스타일 컴포넌트를 호출한다.
    	<Button>Button</Button>
    </>
  )
}