리액트 CSS 사용하기 [react/css/typescript]

리액트에서 CSS를 사용할 때에는 다양한 방식을 사용할 수 있다. 그 중 알아볼 몇 가지에 대해 나열해보자면 다음과 같다.

• 일반CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식
• Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다.
• CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션
• styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다.

일반 CSS

먼저, 리액트로 처음 프로젝트를 생성하게 되면, 다음과 같은 화면이 보일것이다.

이 화면은 App 컴포넌트의 화면을 렌더링한 것인데, App.tsx와 App.css 파일로 이 화면을 만들 수 있다.

// App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

/* App.css */
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. CSS 클래스가 중복되는 것을 방지하기 위해 여러 방식을 차용하고 있는데, 그 중 하나는 이름을 지을 때 특별한 규칙을 이용하는 것이고, 다른 하나는 CSS Selector를 활용하는 것이다.

• 이름 짓는 규칙

프로젝트에 자동으로 생성된 App.css를 읽어보면 클래스 이름이 [컴포넌트 이름-클래스] 형태로 지어져 있다. 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지할 수 있다.

• CSS Selector

CSS Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. 만약 .App 안에 들어 있는 .logo에 스타일을 적용하고 싶다면 다음과 같이 작성한다.

.App .logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
}

CSS 작성 규칙

CSS 작성 시 규칙을 지켜야 코드의 가독성과 유지보수성이 좋아지며, 스타일이 일관되고 예측 가능한 결과를 나타낸다. 아래는 CSS 작성 시 규칙 중 일부이다.

• 들여쓰기

들여쓰기는 가독성을 높이는 데 매우 중요하다. 보통 공백 2칸 혹은 4칸을 이용해 들여쓰기를 한다.

.container {
  padding: 20px;
  margin: 0 auto;
}

• 세미콜론

CSS에서는 각 스타일 규칙의 마지막에 세미콜론(;)을 넣어주어야 한다.

• 하이픈

CSS에서는 클래스 이름에 하이픈(-)을 사용해 구분한다. 이는 가독성을 높이는 데에 도움이 된다.

.header-container {
  padding: 20px;
  margin-bottom: 20px;
}

• 색상 표현

CSS에서는 색상을 RGB, RGBA, HEX, HSL, HSLA 등 다양한 방법으로 표현할 수 있다. HEX 코드는 16진수로 색상을 표현하며, 각각의 색상을 두 자리씩 나누어 표기한다.

.color {
  background-color: #f5f5f5;
  color: rgba(0, 0, 0, 0.8);
}

• 주석

CSS 코드 내에서는 주석을 추가해 스타일이 어디에서 사용되는지 설명할 수 있다.

/* 전체 컨테이너 스타일 */
.container {
  padding: 20px;
  margin: 0 auto;
}

/* 헤더 컨테이너 스타일 */
.header-container {
  padding: 20px;
  margin-bottom: 20px;
}

Sass 사용

Sass는 CSS를 보완해 더 유지보수하기 쉽고 확장 가능한 스타일 시트 언어이다. Sass는 CSS의 확장된 문법을 사용하여 변수, 중첩 규칙, mixin 등을 지원하여 CSS 코드를 간결하고 효율적으로 작성할 수 있다.

Sass에서는 두 가지 확장자인 scss와 sass를 지원한다. 두 확장자 간 문법이 꽤 다른데, 차이는 다음과 같다.

/* sass */
$font-stack: Helvetica, sans-serif
#primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

/* scss */
$font-stack: Helventica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// SassComponent.scss
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}
.SassComponent {
  display: flex;
  .box {
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red {
      background: $red;
      @include square(1);
    }
    &.orange {
      background: $orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.indigo {
      background: $indigo;
      @include square(6);
    }
    &.violet {
      background: $violet;
      @include square(7);
    }
    &:hover {
      background: black;
    }
  }
}

다음은 Sass 사용의 예시이다.

// SassComponent.tsx
import "./SassComponent.scss";

function SassComponent() {
  return (
    <div className="SassComponent">
      <div className="box red" />
      <div className="box orange" />
      <div className="box yellow" />
      <div className="box green" />
      <div className="box blue" />
      <div className="box indigo" />
      <div className="box violet" />
    </div>
  );
}

export default SassComponent;

위 예시 코드를 렌더링해주면 다음과 같은 화면이 나온다.

CSS Module

CSS Module은 리액트 프로젝트에서 CSS를 사용할 때, 전역적으로 CSS를 작성하는 것이 아니라 컴포넌트 단위로 CSS를 작성할 수 있게 해주는 기술이다. 각 컴포넌트에 대해 고유한 클래스 이름을 생성하여 CSS 스타일을 적용하고, 이를 다른 컴포넌트와 겹치지 않도록 보장한다.

사용 예시는 다음과 같다.

/* CSSModule.module.css */
.wrapper {
  background: black;
  padding: 1rem;
  color: white;
  font-size: 2rem;
}

.something {
  font-weight: 800;
  color: aqua;
}

// CSSModule.tsx

import styles from "./CSSModule.module.css";

function CSSModule() {
  return (
    <div className={styles.wrapper}>
      Hello, I'm <span className={styles.something}>CSS Module!</span>
    </div>
  );
}

export default CSSModule;

CSS 클래스를 두개 이상 사용할 경우, 다음과 같이 코드를 작성해줄 수 있다.

/* CSSModule.module.css */
.wrapper {
  background: black;
  padding: 1rem;
  color: white;
  font-size: 2rem;
}

.inverted {
  color: black;
  background: white;
  border: 1px solid black;
}

.something {
  font-weight: 800;
  color: aqua;
}

// CSSModule.tsx

import styles from "./CSSModule.module.css";

function CSSModule() {
  return (
    <div className={`${styles.wrapper} ${styles.inverted}`}>
      Hello, I'm <span className={styles.something}>CSS Module!</span>
    </div>
  );
}

export default CSSModule;

styled-components

styled-components는 리액트 컴포넌트를 정의할 때 CSS를 작성하는 방식 중 하나이다. 이를 사용하면 CSS와 컴포넌트가 서로 강하게 결합될 수 있어 유지보수성과 재사용성이 높아진다.

styled-components는 패키지 설치를 해주어야 한다.

// 자바스크립트의 경우
npm install styled-components

// 타입스크립트의 경우
npm install --save-dev @types/styled-components

다음으로, button 컴포넌트를 만드는 예시이다.

import * as React from "react";
import styled from "styled-components";

interface ButtonProps {
  primary?: boolean;
}

const Button = styled.button<ButtonProps>`
  background-color: ${(props) => (props.primary ? "blue" : "white")};
  color: ${(props) => (props.primary ? "white" : "blue")};
  border: 2px solid blue;
  font-size: 16px;
  padding: 18px;
  border-radius: 4px;
`;

export default Button;

styled-components를 사용하면 스크립트 파일 하나로 스타일까지 작성할 수 있기 때문에 .css 또는 .scss 확장자를 가진 파일을 따로 만들지 않아도 된다는 장점이 있다.