[Today I Learned] 12월 1주차 day4

styled-components

리액트에서 css-in-js방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지이다.

1. yarn add styled-components // yarn 명령어로 styled-components 설치
2. vs코드에서 style을 편하게 작성하게 해주는 styled-components plugin 확장자 설치

styled-componet 활용

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

// styled-components를 만든다.
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${({ borderColor }) => borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용.
  margin: 20px;
`;

const boxList = ["red", "green", "blue"];

// 색을 넣으면, 이름을 반환해주는 함수를 만듬.
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
  }
};

const App = () => {
  return (
    <div>
      {/* 위에서 만든 styled-components를 사용. */}
      {/* 그리고 props를 통해 borderColor라는 값을 전달. */}
      {boxList.map((boxEl) => {
        return <StBox borderColor={boxEl}>{getBoxName(boxEl)}</StBox>;
      })}
    </div>
  );
};

export default App;