[CSS] Styled-Components로 CSS-in-JS 구현하기

김뀨뀨·2022년 8월 28일
0

html/css

목록 보기
2/3
post-thumbnail

CDD(Component Driven Development)


인터넷이 만들어진 이후 기술의 발달과 함께 인터넷을 사용하는 환경도 다양해졌다.
또, 점점 커지는 프로젝트 규모와 복잡도로 CSS를 일관적인 패턴으로 작성하고 구조화하는 방법이 필요해졌다. 그래서 여러 CSS 방법론들이 나왔고 사진과 같은 발전 과정을 거쳐서 CDD 개발 방법이 등장했다!

💭 CDD란?

재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하는 방법이다.
레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어나간다. 따라서 컴포넌트 단위로 페이지를 조립하는 상향식 개발에 적합하다.

CDD가 나오기 전까지..

CSS 전처리기


CSS 전처리기는 CSS 파일들을 구조화하고 작은 파일들로 분리한다. 이를 통해 CSS 작업의 번거롭고 반복적인 일을 프로그래밍의 개념(변수, 함수, 상속 등등)을 활용해 해결할 수 있다.
하지만! 전처리기 자체로는 웹 서버가 인지하지 못하기 때문에 따로 컴파일러가 필요하다.

SASS(Syntatically Awesome Style Sheets)

대표적으로 CSS를 확장해주는 스크립팅 언어인 SASS는 자바스크립트처럼 특정 속성의 값을 변수로 선언해 필요한 곳에 가져다 쓸 수 있다.
정확히는 SASS가 SCSS 코드를 읽어서 컴파일하고 전역 CSS 번들 파일을 만드는 전처리기 역할을 한다.
(SCSS: SASS의 3버전에서 도입되었는데 SASS보다 CSS에 좀 더 가깝다. 어쨌든 사실상 SASS=SCSS라고 보아도 무방하다.)
하지만 이렇게 전처리 과정을 거쳐 컴파일하면 CSS 파일의 용량이 어마어마하게 커진다..!

CSS 방법론

CSS 전처리기의 문제를 보완하기 위해 나온 것이 BEM, OOCSS, SMACSS 등의 방법론이다.
방법론들이 공통으로 지향하는 것은
1. 코드의 재사용, 2. 쉬운 유지 보수, 3. 확장 가능, 4. 클래스명으로 의미 예측 가능 이다.

BEM

대표적으로 BEM은 Block, Element, Modifier로 구분해 클래스명을 작성하는 방법이다.
이렇게 하면 html, css, sass 파일에서 더 일관된 코딩 구조를 만들 수 있다.
하지만 여기서도 문제점이 발생하는데, 클래스명 선택자가 매우 장황해진다.
그리고 기타등등 다른 문제점으로 인해 결국 SASS, BEM 모두 진정한 캡슐화의 개념을 가지는 것이 아니라 유일한 클래스명을 선택하는 것에 의존해야 한다.

CSS-in-JS


현대 웹은 페이지가 아니라 컴포넌트로 작성되었다. 하지만 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 없어서 CSS-in-JS를 사용하면 여러 장점을 얻을 수 있다.
CSS 모델을 문서 레벨이 아니라 컴포넌트 레벨로 캡슐화할 수 있고, 네이밍이나 최적화를 신경 쓸 필요가 없다. (자세한 내용: https://d0gf00t.tistory.com/22 참고)

Styled Components


대표적인 CSS-in-JS 라이브러리로 Styled Components가 있다.

Styled Components 사용하기

설치

npm install --save styled-components
import styled from "styled-components"

문법

1. 컴포넌트 만들기

  • ES6 템플릿 리터럴 문법을 사용한다.
    const 컴포넌트이름 = styled.태그종류`
    	CSS속성1: 속성값;
    	CSS속성2: 속성값;
    	...
    `;
const BlueButton = styled.button`
	background-color: blue;
	color: white;
`;

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

2. 컴포넌트 재활용

// 위 코드에 이어서
const BigBlueButton = styled(BlueButton)`
	padding: 10px;
	marign-top: 10px;
`;

3. Props 활용

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

방법 1) 조건부 렌더링

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

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

방법 2) Props 값으로 렌더링

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

const Button = styled.button`
	background: ${(props) => props.color || "white" };
`; // 이렇게도 가능!

export default function App() {
	return (
		<>
			<GlobalStyle />
			<Button color="orange">Orange Button</Button>
		</>
	);
}

4. 전역 스타일 설정

GlobalStyle.js 파일

import { createGlobalStyle } from "styled-components";

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

App.js 파일

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

...

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용</Button>
		</>
	);
}
profile
개발로 밥벌이 하고 싶은 사람

0개의 댓글