Styled Components - 소개, 사용

CSS-in-Js란?

css-in-js란 무엇인가?
단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이죠. CSS-in-JS 방식을 사용하기 위해 우리는 새로운 패키지를 사용할 것 입니다.

styled-components 란 무엇인가?
styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 입니다.

패키지
패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 입니다. 패키지들은 누군가에 의해 만들어진 것으로 npm에 모여 있어요.
우리는 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치해서 사용할 수 있어요. 앞으로 이렇게 React에서 자체적으로 제공하지 않지만, 사용하면 우리가 개발하는데 더 유용한 여러 패키지를 사용해볼 예정입니다.

styled-components 준비하기

VScode 플러그인 설치

yarn 에서 styled-components 설치하기
vscode 터미널에서 아래 명령을 입력해서 패키지를 설치

yarn add styled-components

styled-components 사용하기

import "./App.css";
import styled from "styled-components";

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

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${function (props) {
      return props.borderColor;
    }}; // 화살표 함수 ${(props) => props.borderColor};
  margin: 20px;
  /* background-color: ${(props) => {
    return props.backgroundColor;
  }}; */
`;

// 박스의 색

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

// 색을 넣으면, 이름을 반환

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

function App() {
  return (
    <StContainer>
      {/* <StBox borderColor="red">빨간박스</StBox> */}
      {boxList.map((box) => {
        return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
      })}
    </StContainer>
  );
}

export default App;