Post

๐ŸŒŒ 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.