[소플의 처음 만난 리액트] 15장 실습문제

SampleBtn.jsx

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;
`;

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

function SampleBtn(props){
  return(
    <div>
      <Button>Normal</Button>
      <Button dark>Dark</Button>
      <RoundedButton dark>Rounded</RoundedButton>
    </div>
  )
}

export default SampleBtn;

핵심 키워드

• React의 styled-components에서는 조건이나 동적으로 변하는 값, 즉 props를 이용해서 스타일을 지정할 수 있다.

Blocks.jsx

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

// styled-components를 사용하여 스타일링해 보기

const Wrapper = styled.div`
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: flex-start;
  background-color: lightgrey;
`;

const Block = styled.div`
  // 그때그때 변화해야 하는 부분은 props를 이용해서 바꿈
  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((blockItems) => {
        return (
          <Block
            padding={blockItems.padding}
            backgroundColor={blockItems.backgroundColor}
          >
            {blockItems.label}
          </Block>
        );
      })}
    </Wrapper>
  );
}

export default Blocks;

핵심 키워드

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

• 컴포넌트 개념을 사용하기 때문에 리액트로 활용하기 좋다.

• 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정한다.

결론!