[React] styled-components로 CSS 스타일링

 

class없이 styled-components를 이용해 css스타일링하기

styled-components는 라이브러리이다.

component가 많아지면 CSS 작성 고민이 많아진다. 한군데 다 만들어두면, 실수로 class명을 중복을 하기도 하고 

class선언없이 CSS in JS로 컴포넌트에 CSS를 장착한다.

 

방법

1. yarn add styled-components를 하여 설치한다.

2. 컴포넌트에서 import 해온다.

import styled from 'styled-components';

3. 컴포넌트에 직접 스타일 넣어서 스타일링하기

let box = styled.div`css입력하듯 글자 넣는다`;

let titleName = styled.h1`
	font-size: 25px;
	color: ${props => props.color} // 색깔만 다른 제목이 여러개 필요할 때
`;

컴포넌트에서 <titleName color={'red'}> 이런식으로 props 전달

변수명이 아니라 글자만 보내도 되면 <titleName color="red">이렇게 쓰기도 한다.

 

정리

CSS를 미리 입혀놓은 컴포넌트

className 작명 필요 없다.

 

장점

컴포너트가 30개 이상씩 많을 때 클래스명 겹쳐서 스타일이상해질 걱정없다. (실수 전파될 염려 없다)

 

단점

앞으로 수십개의 <div>를 사용하지 않고 수십개의 <컴포넌트>를 보게 된다.

 

 

styled-components처럼 쓰는 것말고도, css를 모듈화해주는 방법도 있다! 그러면 클래스명 겹칠 걱정 안해도 된다.

취향껏 쓰자~!