1. styled-components
- CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리
1) styled-components 설치
npm install --save styled-components
2) styled-components 기본 사용법
- styled-components는 태그드 템플릿 리터럴(tagged template literal)을 사용하여 구성 요소의 스타일을 지정
리터럴(literal)
- 소스코드 상에 있는 고정된 값
템플릿 리터럴
- backticks(`)를 사용하여 문자열을 작성하고 그 안에 대체 가능한 expression을 넣는 방법
- 언태그드 템플릿 리터럴(Untagged template literal)과 태그드 템플릿 리터럴(Tagged template literal)로 나뉨
//Untagged template literal
//단순한 문자열
`string text`
//여러 줄에 걸친 문자열
`string text line1
string text line2`
//대체 가능한 expression이 들어있는 문자열
`string text ${expression} string text`
//Tagged template literal
myFunction `string text ${expression} string text`;- 언태그드 템플릿 리터럴은 보통 문자열을 여러 줄에 걸쳐서 작성하거나 포매팅(formatting)을 하기 위해서 사용
- 태그드 템플릿 리터럴은 태그 함수를 호출하여 결과를 리턴
-> 태그 함수의 파라미터는 expression으로 구분된 문자열 배열과 expression이 순서대로 들어가게 됨
- styled-components는 태그드 템플릿 리터럴을 사용하여 CSS 속성이 적용된 리액트 컴포넌트를 만들어 줌
- backtics(`)로 둘러싸인 문자열 부분에 CSS 속성을 넣고 태그 함수 위치에는 styled.<HTML 태그> 형태로 사용
import React from "react";
import styled from "styled-components";
const Wrapper = styled.div`
padding: 1em;
background: grey;
`;
3) styled-components의 props 사용하기
- props를 이용하여 조건이나 동적으로 변하는 값을 사용해서 스타일링
ex)
import React from "react";
import styled from "styled-components;
const Button = styled.button`
color: ${props=>props.dark? "white" : "dark"};
background: ${props=>props.dark? "black" : "white"};
border: 1px solid black;
`;
function Sample(props) {
return (
<div>
<Button>Normal</Button>
<Button dark>Dark</Button>
</div>
)
}
export default Sample;- 여기에서의 props은 해당 컴포넌트에 사용된 props를 의미
- <Button dark>Dark</Button>처럼 props로 dark로 넣어 줌
- 이렇게 들어간 props는 그대로 styled-components로 전달됨
4) styled-components의 스타일 확장하기
- Button 컴포넌트는 HTML의 button 태그를 기반으로 만들어진 단순한 버튼
- Rounded Button 컴포넌트는 Button 컴포넌트에서 모서리를 둥글게 만든 컴포넌트
import React from "react";
import styled from "styled-components";
//Button 컴포넌트
const Button = styled.button`
color:grey;
border:2px solid palevioletred;
`;
//Button에 style이 추가된 RoundedButton 컴포넌트
const RoundedButton = styled(Button)`
border-radius:16px;
`;
function Sample(props) {
return (
<div>
<Button>Normal</Button>
<RoundedButton>Rounded</RoundedButton>
</div>
)
}
export default Sample;
2. 실습 - styled-components를 사용하여 스타일링해 보기
Blocks.jsx
import styled from "styled-components";
const Wrapper = styled.div`
padding: 1rem;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
background-color: lightgrey;
`;
const Block = styled.div`
padding: ${(props) => props.padding};
border: 1px solid black;
border-radius: 1rem;
background-color: ${(props) => props.backgroundColor};
color: white;
font-size: 2rem;
font-weight: bold;
text-align: center;
`;
const blockItems = [
{
label: "1",
padding: "1rem",
backgroundColor: "red",
},
{
label: "2",
padding: "3rem",
backgroundColor: "green",
},
{
label: "3",
padding: "2rem",
backgroundColor: "blue",
},
];
function Blocks(props) {
return (
<Wrapper>
{blockItems.map((blockItem) => {
return (
<Block
padding={blockItem.padding}
backgroundColor={blockItem.backgroundColor}
>
{blockItem.label}
</Block>
);
})}
</Wrapper>
);
}
'react' 카테고리의 다른 글
| [리액트를 다루는 기술] 4장 이벤트 핸들링 (1) | 2023.11.01 |
|---|---|
| [리액트를 다루는 기술] 3장 컴포넌트 (1) | 2023.11.01 |
| [소플] ch 14. 컨텍스트 (1) | 2023.10.30 |
| [소플] ch 13. 합성 vs 상속 (0) | 2023.10.30 |
| [소플] ch 12. State 끌어올리기 (0) | 2023.10.30 |
