[React/리액트] styled-components와 CSS-in-Js

1. CSS-in-Js

: 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다. 순수한 CSS코드를 자바스크립트를 이용해

  CSS 코드를 만들어내는 것이다.

 

이전 주차에서는 css파일을 생성 후, 컴포넌트에서 사용할 모든 CSS을 만들어놓은 CSS파일 안에 선언하여 담아놓고,

컴포넌트에서 className 호출을 통해 CSS파일에서 가져다가 CSS코드를 사용하였다.

이번엔 styled-component를 통해 더 간편히 컴포넌트를 꾸밀 수 있는 CSS-in-Js 방식을 사용해보자.

 

2. styled-components

: styled-components는 우리가 리액트에서 CSS-in-Js 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지이다.

  emotion, tailwindcss 등 다양한 패키지가 있지만, styled-components가 꾸준히 많은 개발자들에게 사용되고 있는 패키지이다.

 

* 패키지란?
React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 third party 프로그램이다.  패키지들은 누군가에 의해 만들어진 것으로

npm에 모여 있고, 우리는 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해 설치해서 사용할 수 있다. 

 

3. styled-components 설치하기

   3-1 . VScode 플러그인 설치

      : 플러그인에서 'vscode-styled-components' 검색하여 플러그인 설치

 

   3-2. yarn 또는 npm에서 styled-components 설치하기

yarn add styled-compnents

npm install styled-components

 

4. 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;