CDD 개발도구

ock·2023년 2월 20일

Styled Components

CSS in JS 라이브러리 중에서 현재 가장 인기 있는 라이브러리.
CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로,
HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다.

Styled Components 설치하기

1. 터미널에 아래 명령어 입력하여 라이브러리 설치.


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

# with yarn
$ yarn add styled-components

2. Styled Components는 package.json에 다음 코드를 추가하도록 권장.

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

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

import styled from "styled-components"

Styled Components 문법

1. 컴포넌트 만들기

ES6의 Templete Literals문법을 사용한다. 즉, 따옴표가 아닌 백틱을 사용한다.
컴포넌트를 선언한 후, styled.태그종류 를 할당하고,
백틱 안에 기존에 CSS를 작성하던 문법과 똑같이 스타일 속성을 작성해주면 된다.
이렇게 만든 컴포넌트를 React 컴포넌트를 사용하듯 리턴문 안에 작성해주면 스타일이 적용된 컴포넌트가 렌더링된다.
const 컴포넌트이름 = styled.태그종류`
	css속성1 : 속성값;
	css속성2 : 속성값;
`

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

컴포넌트를 선언하고,
styled() 에 재활용할 컴포넌트를 전달해준 다음,
추가하고 싶은 스타일 속성 작성해준다.
const 컴포넌트이름 = styled(재활용할 컴포넌트)`
	추가할 css속성1 : 속성값;
	추가할 css속성1 : 속성값;
`

3. props 활용하기

Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다.
내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다.
Styled Components 는 템플릿 리터럴 문법( ${ } )을 사용하여 자바스크립트 코드를 사용할 수 있다. props를 받아오려면 props 를 인자로 받는 함수를 만들어 사용하면 된다.
const 컴포넌트이름 = styled.태그종류`
css속성 : ${(props) => 함수코드}
`;
1) props로 조건부 렌더링하기
const Button = style.button`
	background:${(props)=>props.skyblue ? "skyblue" : "white"}
`;
2) props 값으로 렌더링하기
props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용할 수 있다.
const Button = styled.button`
	background : ${(props)=>props.color ? props.color : "white"}
`

4. 전역 스타일 설정하기 (전역에 스타일을 설정하고 싶다면?)

1) Styled Components에서 createGlobalStyle함수를 불러온다.
import { createGlobalStyle } from "styled-components";
2) 그 다음 이 함수를 사용해 CSS 파일에서 작성하듯 설정해주고 싶은 스타일을 작성한다.
const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
3) 이렇게 만들어진<GlobalStyle>컴포넌트를 최상위 컴포넌트에서 사용해주면 전역에 <GlobalStyle>컴포넌트의 스타일이 적용된다.
function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>);
}

실습(Styled Components 사용하기)

before

App.js

style.css

js파일과 css파일을 Styled Components로 바꿔 적용하는 것이 이번 실습이었다.

처음에는 어떻게 적용하는지를 몰라 무조건 app.js파일에 styled-components를 import 했는데 계속 오류밑줄이 뜨네..
혹시 하는 생각에 css파일을 삭제했더니 오류를 뜻하는 밑줄이 사라졌다.
그렇게 기분이 좋아진 나...

import styled from "styled-components";

그렇게 import를 마친 나는 이어서 css 속성과 값을 Styled Components 문법으로 바꿔 작성하고, return부분도 수정해주었다.

이제 다음으로는 hover 적용이었는데, 이는 코드스테이츠에서 알려주지 않았다... 인터넷에 직접 찾아보래서 구글링했더니 다행히 쉽게 방법을 찾을 수 있었다.

&:hover {
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }

생각보다 너무 쉬워서 놀랬다.
저.. 뭐라고 부르는지 모르겠지만 "&" 를 붙여주고 hover표시하여 속성과 값을 작성하면 된다. 짜란

그렇게 결과물은 완성이 되었다.

우와앙 (짝짝)

여기서 끝이 아니고.. 전역 스타일적용도 있어서 해봤는데 이건 사실 맞는지 아닌지 확신이 없어서 그냥 사진만 찍 올리기.

after

App.js

GlobalStlye.js

Storybook

UI 개발 즉, Component Driven Development를 하기 위한 도구.
각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. ⇒ 전체 UI를 한 눈에 보고 개발할 수 있다.
재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다.
- 이를 통해 버그를 사전에 방지할 수 있도록 도와준다.
- 또한 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.
Storybook은 기본적으로 독립적인 개발 환경에서 실행된다.
- 개발자는 애플리케이션의 다양한 상황에 구애받지 않는 UI 컴포넌트를 집중적으로 개발할 수 있다.