컴포넌트 꾸미기 (CSS-in-JS)

1. CSS-in-Js란?

(1) css-in-js란 무엇인가?

자바스크립트 코드에서 CSS를 작성하는 방식

순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이다.

CSS-in-JS 방식을 사용하기 위해 styled-components 라는 패키지를 사용합니다.

 

(2) styled-components란?

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

styled-components 외에도, emotion, tailwindcss 가 있지만 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지다.

 

2. styled-components 준비하기

(1) VScode 플러그인 설치

(2) yarn 에서 styled-components 설치하기

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

yarn add styled-components

 

3. styled-components 사용하기

(1) 기본적인 사용법

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

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

const App = () => {
  return <Box>박스</Box>;
};

export default App;

핵심 코드:  const Box = styled.div``;

(shift) + (~) 를 같이해주면 백틱이 나오는데 styled-components 만드는 방법이다.

 

(2) 조건부 스타일링 가능

스타일 코드를 작성할 때,

if문 사용, switch문 사용, 삼항연산자 사용 등 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다.

styled-components도 말 그대로 컴포넌트다.

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

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

const App = () => {
  return (
    <div>
      <Box borderColor="red">빨간 박스</Box>
      <Box borderColor="green">초록 박스</Box>
      <Box borderColor="blue">파랑 박스</Box>
    </div>
  );
};

export default App;

borderColor를 props로 자식컴포넌트인 styled-components를 Box에 전달한다.

그리고 부모 컴포넌트에서 props를 보내 자식 컴포넌드에서 받는다.

 

(3) Swtich문과 map을 사용해서 리팩토링 해보기

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

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

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

const App = () => {
  const boxList = ["red", "green", "blue"];

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

  return (
    <Container>
      {boxList.map((box) => (
        <Box borderColor={box}>{getBoxName(box)}</Box>
      ))}
    </Container>
  );
};

export default App;

 

4. 요약

• CSS-in-JS란, 자바스크립트로 CSS코드를 작성하는 방식을 말한다.
• props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링을 할 수 있다.