Styled-Components (1)

CSS in JS

CSS in JS는 스타일 정의를 CSS 파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.

웹페이지를 HTML, CSS, JS 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JS를 몽땅 때려박는 패턴이 많이 사용되고 있다. React는 JSX를 사용해서 이미 JS가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS in JS 라이브러리만 사용하면 CSS도 손쉽게 JS에 삽입할 수 있다.

 

JS에서 컴포넌트에 스타일 적용하는 방법

1. 컴포넌트에 직접 삽입

<Box style={{backgroundColor: "white", width:100, height:100}} />

2. style.css

App.js에 import "./style.css"로 stylesheet를 불러오고, 각 컴포넌트마다 <Component className="box" />처럼 className을 지정해서 일반 html, css처럼 스타일 적용

3. Name.module.css

import React from "react";
import styles from "./Box.module.css";

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

className 을 설정 할 때에는 styles.Box 이렇게 import로 불러온 styles 객체 안에 있는 값을 참조해야 한다.

module.css를 사용하면 각 모듈마다 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에, 실수로 CSS 클래스 이름이 다른 관계 없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일에 대하여 걱정 할 필요가 없다.

Styled-Components

기본적인 스타일링

App.js

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

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: black;
  border-radius: 50%;
`;

function App() {
  return <Circle />;
}

export default App;

결과물

styled-components 를 사용하면 이렇게 스타일을 입력함과 동시에 해당 스타일을 가진 컴포넌트를 만들 수 있다. 만약에 div 를 스타일링 하고 싶으면 styled.div, input을 스타일링 하고 싶으면 styled.input 형식으로 사용하면 된다.