우선 styled-components를 설치하기 위해선 터미널을 열고
yarn add styled-components
혹은
npm install styled-components
입력 후
사용하고 싶은 컴포넌트 최상단에 import 해준다.
import styled from 'styled-components'
컴포넌트가 많아지게 되면 CSS를 만들 때
그래서 컴포넌트를 만들 때 스타일을 바로 입혀서 만드는 방법이 있는데
그것이 styled-components 라는 라이브러리다.
padding이 30px인 div박스를 만들고 싶을땐?
import React from "react";
import styled from "styled-components";
let box = styled.div`
padding: 30px;
`;
function App(){
return(
<div>
<box></box>
<div>
)
}
class 선언할 필요 없이+css파일을 건드릴 필요 없이 바로 <컴포넌트> 완성!
비슷한 UI들을 여러가지 만들어야한다면?
일일이 box1, box2, box3... 이런 식으로 만드는건 좀 아닌듯
만약 h2태그가 색깔별로 필요하다면?
이럴때 유용한 props문법
import React from 'react';
import styled from 'styled-components';
let 제목 = styled.h2 `
font-size : 25px;
color: ${props => props.색깔};
`;
function App(){
return(
<div>
<제목>안녕</제목>
</div>
)
}
색상을 기입하는 부분에
${props => props.색깔}
이라는 코드를 작성한다.
그냥 템플릿 리터럴로 작성한 것이고, 'props.색깔' 이라는 props변수를 집어넣은 것이다. 또한 위와 같이 ${props.색깔} 이렇게 하면 안되고 콜백함수로 집어넣어주어야 한다.
그리고나면
import React from 'react';
import styled from 'styled-components';
let 제목 = styled.h2 `
font-size : 25px;
color: ${props => props.색깔};
`;
function App(){
return(
<div>
<제목 색깔="blue">안녕1</제목>
<제목 색깔="red">안녕2</제목>
</div>
)
}
props로 뚫어놓은 자리에 원하는 문자를 전송시켜줄 수 있다.
그러면
안녕1
안녕1
처럼 각각 스타일이 적용되어 나타난다.
<제목 색상="blue"></제목>
<제목 색상={'red'}></제목>
그냥 일반 텍스트를 전달하고 싶으면 "" 따옴표 안에 쓰면 되고
변수나 자료형을 담고 싶으면 {} 중괄호 안에 쓰면 된다.
styled-components가 무조건 기존CSS작성보다 좋은 것은 아니지만
과 같은 장점들이 존재하는 방법이다.