[항해 16일차] TIL_React 숙련주차 : Styled Components

학습 목표

1. 1. CSS-in-JS 를 이해할 수 있습니다.
2. Styled Components 를 배워보고, 활용할 수 있습니다.

 

CSS-in-JS란?

css-in-js 란 무엇인가?

지난 주차에 css파일을 생성하고, 그 안에서 CSS코드를 이용해 컴포넌트를 꾸몄습니다. 나름 괜찮은 방식이었지만, 조금은 불편했습니다. 컴포넌트를 만들고, 컴포넌트를 꾸미기 위해 css파일을 만들어서 import 하고, HTML tag마다 classname 을 넣고 CSS 코드를 작성하는 것을 반복해야 했죠.

이번 숙련주차에서는 조금 더 간편한 방법으로 컴포넌트를 꾸밀 수 있는 CSS-in-JS 방식에 대해 배웠습니다.

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

styled-components 란 무엇인가?

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

※ 패키지란?
→ 패키지란, React 에는 없는 기능이지만, 추가로 가져와서 사용할 수 있는 써드파티 프로그램입니다.
패키지들은 누군가에 의해 만들어진 것으로 npm 에 모여 있죠. 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치해서 사용할 수 있습니다. 

 

styled-components 준비하기

VScode 플러그인 설치하기

styled-components 를 이용해서 코드를 작성할 때 조금 더 편하게 하기 위해 아래 플러그인을 설치하겠습니다. 이 플러그인을 설치해야만 styled-components 안에서 스타일 코드를 편하게 작성할 수 있습니다.

 

yarn 에서 styled-components 설치하기

vscode 터미널에서 아래 명령을 입력해서 패키지를 설치하면 됩니다.

yarn add styled-components

 

styled-components 사용하기

기본적인 사용법

styled-components 의 기본적인 원리는 꾸미고자 하는 컴포넌트를 SC 의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행합니다.

// 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;

 

위와 같이 코드를 작성하고 브라우저를 보면, 아래와 같이 스타일링이 된 컴포넌트를 볼 수 있습니다.

가장 핵심이 되는 코드는 const StBox = styled.div``;입니다. 이 방식대로 styled-components 를 만듭니다. 참고로 `` 은 백틱이라는 문자입니다. 그리고 styled. 뒤에는 html 의 태그가 옵니다. 아래처럼 내가 원하는 html 태그를 사용해서 styled-components 를 만들 수 있습니다.

• div → styled.div
• span → styled.span
• button → styled.button

 

조건부 스타일링이란?

classname 을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components 를 이용하면 간편하게 할 수 있습니다. 만약에 스타일 코드를 작성할 때, if 문을 사용할 수 있다면?, switch문을 사용할 수 있다면?, 삼항연산자를 사용할 수 있다면? 이라는 생각을 할 수 있습니다. CSS-in-JS 방식의 강점이 스타일 코드를 JS 코드 작성하듯이 스타일 코드를 작성할 수 있다는 점입니다.

 

조건부 스타일링 구현

위 이미지에 보이는 red, green, blue border 를 가진 박스를 구현해보겠습니다.

지난주에 배운 props는 부모 컴포넌트에 자식 컴포넌트로 어떤 정보를 전달하고자 할 때 사용합니다. styled-components 도 말 그대로 컴포넌트입니다. 즉, box 들에게 props 를 통해서 border color 에 대한 정보를 전달해줄 수 있습니다.

// 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;

먼저 styled-componenets 를 생성합니다.
생성한 styled-components 를 부모 컴포넌트에서 사용합니다. 해당 부모 컴포넌트는 App.js 이 됩니다.
원하는 값, borderColor 를 props 로 자식 컴포넌트인 styled-components, StBox 에 전달합니다.
부모 컴포넌트에서 보낸 props 를 자식 컴포넌트에서 받습니다.
   1) 첫째, 먼저 자바스크립트 코드를 사용하기 위해 ${ }로 css 환경에서 자바스크립트 코드가 올 공간을 열어줍니다.
   2) 비어있는 화살표 함수를 열어 줍니다. ${ ( ) => { } } 
   3) 마지막으로 함수의 인자에서 props 를 받아오고, props 안에 있는 borderColor 를 받아오기 위해 그것을 return 합니다. ${(props)⇒{ return props.borderColor }} 이렇게 리턴하면, (props)⇒{ return props.borderColor } 의 값이 === 'red' 가 되고 결국 우리 눈에는 복잡해보이지만, 브라우저는 border: 1px solid red 라는 코드로 인식하여 스타일링이 되는 것 입니다. 

 

Switch 문과 map 을 사용한 리팩토링

위에서 구현한 코드를 자바스크립트의 map 과 switch 문을 이용해 리팩토링했습니다. 

// 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;

 

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