15. styling

-styled-components

css 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어 주는 오픈소스 라이브러리

 

-template literal 

역따옴표``를 이용해 문자열을 작성하고 그 안에 대체 가능한 익스프레션을 넣는 것.

//untagged template literal
`string text`
`string text
 string text2`
 `text ${expression} show`
 
 //tagged template literal
 myFunction`text ${expression} show`;

예시-template literal 문법

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}입니다.`;

예시-template literal 실사용

 

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
	padding : 1em;
    background: grey;
`;

예시 -template literal을 이용한 styled-components

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>Noraml</Button>
            <Button dark>Dark</Button>
        </div>
    );
}

예시-styled-components에 따로 값을 넣어 결정

 

import React from "react";
import styled from "styled-components";

const Button = styled.button`
	color: grey;
    border : 2px solid paleviolatred;
`;

const RoundedButton = styled(Button)`
	border-radius: 16px;
`;

function Sample(props){
	return(
    	<div>
        	<Button>Noraml</Button>
            <RoundedButton>Rounded</Button>
        </div>
    );
}

예시- 다른 컴포넌트의 스타일을 확장해서 쓰는 방법

 

-실습

 

실습 하기 전 styled-components를 설치한다. (명령어 : npm install --save styled-components)

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>
    );
}

export default Blocks;

Blocks.jsx