CSS in JS는 스타일 정의를 CSS 파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.
웹페이지를 HTML, CSS, JS 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JS를 몽땅 때려박는 패턴이 많이 사용되고 있다. React는 JSX를 사용해서 이미 JS가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS in JS 라이브러리만 사용하면 CSS도 손쉽게 JS에 삽입할 수 있다.
<Box style={{backgroundColor: "white", width:100, height:100}} />
style.css
App.js
에 import "./style.css"
로 stylesheet
를 불러오고, 각 컴포넌트마다 <Component className="box" />
처럼 className
을 지정해서 일반 html
, css
처럼 스타일 적용
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 클래스 이름과 중복되는 일에 대하여 걱정 할 필요가 없다.
기본적인 스타일링
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
형식으로 사용하면 된다.