[React] styled-components 사용하기 / props로 스타일 변경하기

오늘은 css를 대신해 styled-componets를 사용해서 스타일을 넣어보겠습니다.

styled-components를 사용하면 css 파일에서 스타일을 지정하지 않고도 js 파일 내에서 해결이 가능하다는 점이 장점이죠!

 

사용법

1. terminal 창에 styled-components를 설치한다.

npm install styled-components

 

2. 라이브러리를 import 한다.

import styled from 'styled-components'

 

3. 원하는  스타일을 작성한다. 예를 들어 버튼에 스타일 컴포넌트로 스타일을 넣는다고 해보자!

let YellowBtn = styled.button`
	background: yellow;
    	color: black;
    	padding: 10px;
`

먼저 스타일을 넣고 싶은 요소에 styled를 붙인다. 그래서 버튼에 스타일을 넣을 것이기 때문에 styled.button이라고 작성하였다. 그런 다음 그 뒤에는 따옴표가 아닌 백틱(`)을 열어서 그 안에 원하는 스타일을 넣어준다. 

마지막으로는 변수에 담아주는데, style-components도 컴포넌트이기 때문에 대문자로 시작함에 유의한다.

 

4. 원하는 곳에 컴포넌트 처럼 적용한다.

<YellowBtn/>

이렇게 하면 배경은 노랑, 글자는 검정, padding은 10px이 들어간 버튼이 나타난다.

 

props를 사용해 styled-components를 여러 컴포넌트에서 재활용하자!

컴포넌트별로 background 값을 받아서 각각 스타일이 다른 버튼을 만들고 싶다면 어떻게 해야 할까?

=> props를 쓰면 된다.

 

난 props는 부모 state를 받아오는 용도로만 생각했는데, 데이터나 스타일을 전송할 때도 쓰인다고 한다!

 

먼저 결과 코드부터 보겠다.

let NewBtn = styled.button`
	background: ${ (props) => props.bg };
    	color: black;
    	padding: 10px;
`

${ } 안에 작성한 이유는 백틱을 이용한 문자열 안에 변수를 넣을 때는 ${ } 안에 작성해야 하기 때문이다.

${ } 안에는 (props) => props.변수 형태로 작성해주면 된다.

 

그런 다음 컴포넌트로 간다.

<NewBtn bg="blue" />
<NewBtn bg="green" />

위에서 설정한 변수를 이용해 background color를 지정한다.

 

그러면 결과적으로 background만 다른 버튼 두 개가 생긴다.