styled-components

1. styled-components란?

 

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

패키지이다.

앞서 배운 class Name을 설정하여 스타일링 하는 것 보다 더 편하고 더 용이하다는 장점이 있다.

 

2. styled-components 준비

 

VScode 플러그인 설치

 

vscode의 플러그인 페이지에서 vscode-styled-components를 검색하여 설치해주도록 하자.

이 플러그인을 설치해야만 styled-components 안에서 스타일 코드를 편하게 작성할 수 있다.

 

yarn에서 styled-components 설치

yarn add styled-components

 

3. styled-components 사용하기

 

사용예시

 

// src/App.js

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

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

const StBox = 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 (
    <StContainer>
			{/* map을 이용해서 StBox를 반복하여 화면에 그린다. */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
};

export default App;

결과물

styled 뒤의 html 태그

 

위와 같이 style코드에서 div로 할지 span으로 할지 등등을 정해줄 수 있다.

 

div ➡️ styled.div

span ➡️ styled.span

button ➡️ styled.button

 

조건부 스타일링

 

위 코드를 보면 알 수 있듯이, styled-components를 이용하여 조건부로 스타일링을 할 수 있다.

위에서는 props로 스타일 컴포넌트에 값을 주고 

스타일 컴포넌트에서 이를 받아 처리하여

return에서 조건부가 걸린 변수를 출력하면 사용자의 조건에 따라서 

스타일링이 출력되게 되게 하였다.