Styled Components 알아보기 -Styled Components로 컴포넌트 관리하기-

Styled Componentstyled-components를 쓰는 이유

기존 리액트에서 객체 리터럴을 통해 css를 적용시키려면

const style = {
	color: 'white',
	backgroundColor: 'black',
}

return <button style={style}>Click</button>

이러한 기존 js문법에 어긋나지 않는 방식으로 변형시켜야 하였다.

하지만 styled-components를 사용한다면

const StyledButton = styled.button`
	color:white;
	backgroundp-color:black;
`;

이런 식으로 템플릿 리터럴을 사용하여 기존 css와 동일하게 입력이 가능하다.

또한 css를 적용시키기 위해 클래스를 생성할때 난수화된 클래스명을 생성하고 적용시키므로 scoped css가 가능해진다.

styled-components 적용

우선 프로젝트의 터미널에서 npm을 사용하여 설치한다.

$ npm i styled-components

이후 styled-components를 사용할 디렉토리로 이동하여 styled를 import한다.

import styled from "styled-components";

스타일이 적용된 컴포넌트 만들기

기본적으로 import한 styled는 프로퍼티로 HTML의 element들을 가지고 있다

const Square = styled.div`
	width: 40px;
	height: 40px;
	background-color: black;
`;

const SquareBox = (props) => {
	return <Square>{props.children}</Square>
}

이러한 형식으로 작성할 시 이는

<div class='sc-난수'><div>

.sc-난수 {
	width: 40px;
	height: 40px;
	background-color: black;
}

이러한 스타일을 가진 element를 반환한다고 볼 수 있다.

컴포넌트 확장하기

위와 같이 htm의 element를 생성하는 것이 아닌 기존 리액트 컴포넌트에 스타일링을 하고싶다면 styled를 함수로 사용하여 인자로 컴포넌트를 부여한다.

import styled from "styled-components";
import Squre from "./Squre"; // styled-components로 작성된 컴포넌트

const RedSquare = styled(Squre)`
	background-color: red;
`;

인자로는 항상 styled-components로 작성된 element뿐만이 아니라 리액트로 작성된 컴포넌트를 인자로 받을수도 있다.

대신에 리액트로 생성된 컴포넌트를 인자로 부여할 때는 리액트 컴포넌트에서 prop으로 내려온 className에 대한 할당 과정을 추가하여야 한다.

/// Squre.js

const Square = (props) => {
	return <div className={props.className}></div>
}

props 사용하기

styled-components 내부에서 props를 사용할 수도 있다.

styled-components는 결국 JS의 템플릿 리터럴로 작성되었기 때문에 기존 JS 템플릿 문자열 내부에서 변수나 연산값 긍을 적용할때 사용하는 ${}를 사용하여 props를 인자로 갖는 함수를 작성하여 props에 대한 스타일링을 적용시킬수 있다.

const Square = styled.div`
	width: 40px;
	height: 40px;
	background-color: ${(props) => props.color};
`;

const ColoredSquare = (props) => {
	return <Square color={props.color}>{props.children}</Square>
}

적용시킬 prop이 많을때는 다음과 같이 분리할 수도 있다.