react에서 component를 어떻게 스타일링하는지 정리합니다😁
이 포스터는 리액트를 다루는 기술을 읽고, 정리한 내용을 토대로 합니다.
클래식한 스타일링, CSS
기존의 CSS 스타일링이 딱히 불편하지 않다고 생각되면 사용하면됩니다.
소규모의 프로젝트에서는 새로운 스타일링 시스템이 오히려 복잡함만 가져올 수 있습니다.
// App.js
import React, { Component } from 'react';
import './App.css';
function App = () => {
return (
<div className="App">
<h1>안녕하세요~ 새로운 컴포넌트 입니다!</h1>
</div>
)
}// App.css
.App {
color: red;
}
h1 {
background-color: blue;
}이름 짓는 규칙
기본 CSS를 사용한다면, 다른 바닐라 프로젝트랑 마찬가지로 네이밍이 중요합니다. BEM 네이밍은 같은 CSS 방법론을 사용해도 되고, CSS Selector 처럼 .App h1 식으로 어느 뎊스를 나타내줌으로 어디에 있는지 명확히 작성하는 것도 방법입니다.
Sass 사용하기
node-sass 라이브러리를 프로젝트에 설치
Sass를 CSS로 변환해주는 라이브러리
문법적으로 매우 멋진 스타일시트 Sass는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해주고 재활용성을 높여 줄 뿐 아니라 코드의 가독성을 높여 유지 보수를 더욱 쉽게 해 줍니다.
Sass는 두가지 확장자를 지원하는데 (.scss/sass), scss가 기본 css와 문법이 비슷하고, 보통 많이 사용됨으로 scss만 알고 있어도 될 것 같습니다.
//scss 문법
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sass 사용 예시
// components/Button.js
import React from 'react';
import './Button.scss';
function Button({ children }) {
return <button className="Button">{children}</button>;
}
export default Button;
//components/Button.scss
$blue: #228be6; // 주석 선언
.Button {
display: inline-flex;
color: white;
font-weight: bold;
outline: none;
border-radius: 4px;
border: none;
cursor: pointer;
height: 2.25rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1rem;
background: $blue; // 주석 사용
&:hover {
background: lighten($blue, 10%); // 색상 10% 밝게
}
&:active {
background: darken($blue, 10%); // 색상 10% 어둡게
}
}
기존 css 에서는 사용하지 못하던 $blue: #228be6; 이런 식으로 스타일 파일에서 사용 할 수 있는 변수를 선언 할 수도 있고 lighten() 또는 darken() 과 같이 함수도 사용 할 수 있습니다.
조건부 스타일링을 할 때 수월하게 해주는 라이브러리 classnames가 있습니다
yarn add classnames 로 설치하고 사용해봅니다.
//components/Button.js
import React from 'react';
import classNames from 'classnames';
import './Button.scss';
function Button({ children, size }) {
return <button className={classNames('Button', size)}>{children}</button>;
}
Button.defaultProps = {
size: 'medium'
};
export default Button;컴포넌트의 props의 값이 button 태그의 className으로 전달됩니다.
// Button.scss
$blue: #228be6;
.Button {
display: inline-flex;
color: white;
font-weight: bold;
outline: none;
border-radius: 4px;
border: none;
cursor: pointer;
// 사이즈 관리
&.large {
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.25rem;
}
&.medium {
height: 2.25rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1rem;
}
&.small {
height: 1.75rem;
font-size: 0.875rem;
padding-left: 1rem;
padding-right: 1rem;
}
background: $blue;
&:hover {
background: lighten($blue, 10%);
}
&:active {
background: darken($blue, 10%);
}
}CSS Module
CSS Module이라는 기술을 사용하면 CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있습니다. CRA(create react-app)으로 만든 프로젝트에서 css 파일의 확장자를 .module.css로 하면 됩니다.
// Box.module.css
.Box {
background: black;
color: white;
padding: 2rem;
}리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 모두 자동으로 고유해집니다.
import React from "react";
import styles from "./Box.module.css";
function Box() {
return <div className={styles.Box}>{styles.Box}</div>;
}
export default Box;이 기술은 다음과 같은 상황에서 유용합니다.
- 레거시 프로젝트에 리액트를 도입할 떄, 기존 프로젝트에 있던 CSS 클래스와 이름이 중복되어도 일이 꼬이지 않게 해줍니다.
- CSS 클래스 네이밍 규칙을 만들기 귀찮을 때
CSS Module은 Sass에서도 사용할 수 있습니다. 단순히 확장자를 .module.scss로 바꿔주면 되는데 node-sass를 설치해야 합니다.
Styled-components
Styled-components는 emotion과 더불어 가장 유명한 CSS in JS 기술 중 하나입니다.
Tagged Template Literal이 사용되는데 함수를 ()로 호출하는 방법 이외에 ``로도 호출하는 자바스크립트 문법 중 하나입니다.
yarn add styled-components로 라이브러리 설치해 줍시다!
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;이처럼 CSS가 들어간 컴포넌트를 만들어 사용합니다. CSS를 따로 사용하지 않고 전부 javascript를 사용하기 때문에 따로 파일을 분기할 필요가 없어, 만약 자바스크립트에 익숙하지만 CSS 사용엔 불편하다면 이 방법을 사용하면 될 것 같습니다.
더 많은 방법들
위에서 소개한 방법 이외에도 더 많은 방법이 존재하는데, 아까 잠깐 소개한 emotion이나 tailwind css라는 방법이 요즘 가장 많이 쓰임으로 한번 찾아보면 좋을 것 같습니다(저도 프로젝트를 하나하며 테일윈드를 써봤는데 정말 편했어요!🙂)
