[React🩵] Styled-components

 

Styled-components란?

리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지

컴포넌트에 공통으로 적용할 스타일을 만든다

백틱(`)으로 감싸서 작성한다

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

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

const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간박스";
    case "green":
      return "초록박스";
    case "blue":
      return "파란박스";
    default:
      return "검정박스";
  }
};

function App() {
  return (
    <>
      {boxList.map(function (boxColor) {
        return (
          <StBox key={boxColor} borderColor={boxColor}>
            {getBoxName(boxColor)}
          </StBox>
        );
      })}
    </>
  );
}