๐ React ์ ๋ฌธ XVI - Styled-Component
๐ React ์
๋ฌธ XVI - Styled-Component
๐
ใ์ํ์ ์ฒ์ ๋ง๋ ๋ฆฌ์กํธใ
๋ฅผ ์ฝ๊ณ ์ ๋ฆฌํ ๊ธ์ ๋๋ค.
Styled-Component
1
npm install --save styled-components
CSS
๋ฌธ๋ฒ์ ๊ทธ๋๋ก ์ฌ์ฉํ๋ฉด์ ๊ฒฐ๊ณผ๋ฌผ์ ์คํ์ผ ์ ์ผ๋ก ๋ค๋ฌ์ด์งComponent
ํํ๋ก ๋ง๋ค์ด ์ฃผ๋ ์คํ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค.Component
๊ฐ๋ ์ ์ฌ์ฉํ๋ฏ๋กReact
์ ๊ถํฉ์ด ์ ๋ง๋ค.
๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ๋ฒ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const name = '์ด๋ฆ';
const region = '๊ฒฝ๊ธฐ๋';
function myTagFunction(strings, nameExp, regionExp) {
let str0 = strings[0];
let str1 = strings[1];
let str2 = strings[2];
return `${str0}${nameExp}${str1}${regionExp}${str2}`;
}
const output = myTagFunction`์ ์ด๋ฆ์ ${name}์ด๊ณ , ์ฌ๋ ๊ณณ์ ${region}์
๋๋ค.`
// ์ถ๋ ฅ ๊ฒฐ๊ณผ : ์ ์ด๋ฆ์ ์ด๋ฆ์ด๊ณ , ์ฌ๋ ๊ณณ์ ๊ฒฝ๊ธฐ๋์
๋๋ค.
console.log(output)
Styled-Components
๋Tagged-Template-Literals
์ ์ฌ์ฉํ์ฌ ๊ตฌ์ฑ ์์์ ์คํ์ผ์ ์ง์ ํ๋ค.Template Literal
์Javascript
์์ ์ ๊ณตํ๋ ๋ฌธ๋ฒ ์ค ํ๋๊ณ ,Literal
์ ์์ค ์ฝ๋์ ๊ณ ์ ๋ ๊ฐ์ ์๋ฏธํ๋ค.Template Literal
์ ๋ค์๊ณผ ๊ฐ์ด ๋ฐฑํฑ์ ์ฌ์ฉํ์ฌ ๋ฌธ์์ด์ ์์ฑํ๊ณ ๊ทธ ์์ ๋์ฒด ๊ฐ๋ฅํExpression
์ ๋ฃ๋ ๋ฐฉ๋ฒ์ด๋ค.
1
2
3
4
5
6
7
import React from "react";
import styled from 'styled-components'
const Wrapper = styled.div`
padding: 1em;
background: grey;
`;
props
์ฌ์ฉ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
<Button dark>Dark</Button>
์์props
๋กdark
๋ฅผ ๋ฃ์ด ์ฃผ๊ณ ์๋ค.- ์ด๋ ๊ฒ ๋ค์ด๊ฐ
props
๋ ๊ทธ๋๋กStyled-Components
๋ก ์ ๋ฌ๋๋ค.
Styled-Components
์คํ์ผ ํ์ฅ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const Button = styled.button`
color: ${props => props.dark ? "white" : "dark"};
background: ${props => props.dark ? "black" : "white"};
border: 1px solid black;
`;
const RoundButton = styled(Button)`
border-radius: 16px;
`;
function Sample(props) {
return (
<div>
<Button>Normal</Button>
<Button dark>Dark</Button>
<RoundButton>Rounded</RoundButton>
</div>
)
}
export default Sample;
Styled-Components
๋ฅผ ์ฌ์ฉํ๋ฉดReact Component
๊ฐ ์์ฑ๋๋๋ฐ, ์ด๋ ๊ฒ ์์ฑ๋Component
๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์๊ธฐ ์ฝ๋์ ๊ฐ์ด ์ถ๊ฐ์ ์ธ ์คํ์ผ์ ์ ์ฉํ ์ ์๋ค.
1
2
3
const RoundButton = styled(Button)`
border-radius: 16px;
`;
- ์๊ธฐ ์ฝ๋๊ฐ ์คํ์ผ์ ํ์ฅํ๋ ํต์ฌ ์ฝ๋๋ค.
์ค์ต
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// Blocks.jsx
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>
);
}
export default Blocks;
ํ๊ณ
- ์ผ๋จ ์ฑ ์ฝ์ ๋ถ๋ถ์ ๋ชจ๋ ์ ๋ฆฌํ์์ง๋ง, ์์ง ๋ง์ด ๋ถ์กฑํ๋ค.
- ํ ์ด ํ๋ก์ ํธ๋ฅผ ํตํด ๋ฐฐ์ด ๋ถ๋ถ๋ค์ ์ ์ฉํ๊ณ ์ดํดํ๋ ๊ณผ์ ์ด ํ์ํ๋ค.
This post is licensed under CC BY 4.0 by the author.