CSS-in-Js

- CSS-in-Js란?

자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식

---

- 사용 방법

import styled from "styled-components";

먼저 styled-components 패키지를 설치하고 import 를 해줘야한다.

const StyledContiner = styled.div`
  display: flex;
`;

const StyledBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red
  margin: 20px;
`;

function App() {
  return (
    <StyledContiner>
      {
        boxList.map((box) => {
          return <StyledBox>빨간 박스</StyledBox>
        })
      }
    </StyledContiner>
  );
}

그리고 템플릿 styled. 뒤에 html 태그붙이고 "템플릿 리터럴"을 사용해서 styled-components를 만든다. 백틱 안에는 css를 사용할 때와 동일하게 스타일 코드를 작성하면 된다.

---

- 조건부 스타일링

CSS-in-Js 는 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다. ex) swich, if...

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

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

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

function App() {
  return (
    <StyledContiner>
      {
        boxList.map((box) => {
          return <StyledBox borderColor={box}>{getBoxName(box)}</StyledBox>
        })
      }
    </StyledContiner>
  );
}

템플릿 리터럴에서 JS 문법을 사용할 때 ${} 를 사용하기 때문에 CSS-in-Js 에서도 동일하게 사용한다. 함수의 인자에서 props를 받아오고, props안에는 부모 컴포넌트에서 보낸 borderColor가 있고, 그걸 return 한다. boxList 에 색을 담고 switch 를 사용해서 색을 넣으면, 이름을 반환해주는 함수를 만든다. map을 이용해서 StyledBox 를 반복하여 뷰포트에 그려주게 된다.