항해 16일차 (Styled-Components)

항해 16일차

리액트 입문이 끝나고 리액트 wdw숙련 주차로 넘어갔다. 리액트 강의를 들으면서 Styled-Components에 대해 알게 되었다.

오늘은 Styled-conponents에 대해 써볼려고 한다.

Styled-Components

리액트에서 CSS-in-JS 방식으로 컴포넌트를ㄹ 꾸밀 수 있게 도와주는 패키지이다. 이외에도 다양한 패키지가 있지만, Styled-Components는 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지이다.

먼저, 설치해보겠다.

VsCode에서 vscode-styled-components 확장 플러그인을 설치해야한다.

그 후 터미널에서

yarn add styled-components를 입력하여 설치한다.

사용법

첫 번째, 기본 사용법.

// src/App.js

import React from "react";
// styled-components에서 styled 라는 키워드를 import 합니다.
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. 
const StBox = styled.div`
	// 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다.
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
	// 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.
  return <StBox>박스</StBox>;
};

export default App;

두 번째, 조건부로 스타일링 구현하기

// src/App.js

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

// 1. styled-components를 만들었습니다.
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다. 
  margin: 20px;
`;

const App = () => {
  return (
    <div>
			{/* 2. 그리고 위에서 만든 styled-components를 사용했습니다. */}
			{/* 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다. */}
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

export default App;

이때 ${(props) => props.borderColor}이라는 템플릿 리터럴을 사용하여 props에 인자를 받아오고 부모 컴포넌트가 보낸 borderColor가 있다. 그것을 return한다. ${(props)⇒{ return props.borderColor }} 를 리턴하면 값이 red가 되고, 브라우저는 border: 1px solid를 인식하여 스타일링이 되는 것이다.

세 번째,

Switch문과 map을 사용해서 리팩토링 하기

// 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 boxList = ["red", "green", "blue"];

// 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
   }
};
const App = () => {
  return (
    <StContainer>
			{/* map을 이용해서 StBox를 반복하여 화면에 그립니다. */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
};

export default App;

마무리

styled-components를 사용하여 연습하였다. 하지만 처음 연습을 해봐서 그런지 두 번째, 세 번째 방법을 사용하기 좀 어려웠다. 더 연습해 봐야 겠다. 오늘 styled-components에 대한 것들을 알 수 있었고, css에 대해 더 알 수 있었당 🔥