CSS를 사용하여 React 스타일을 지정하는 5가지 방법 [2023]

by

리액트(React) 앱에서 CSS 스타일링 방법

웹사이트의 대부분인 97% 이상이 스타일을 입히기 위해 CSS를 사용한다는 사실, 알고 계셨나요?

CSS(Cascading Style Sheets)를 이용하면 개발자들이 시각적으로 매력적이고, 탐색하기 쉬우며, 효과적으로 표시되는 웹 페이지를 제작할 수 있습니다.

CSS 언어는 문서가 사용자에게 어떻게 보여지는지를 정의합니다. 여기서 ‘문서’란 HTML이나 XML과 같은 마크업 언어로 작성된 파일을 의미합니다.

리액트(React)에서의 스타일링이란 무엇일까요?

리액트 앱의 간결한 생성, 실행 및 유지보수 능력은 리액트가 인기를 얻은 주요 원인 중 하나입니다. 리액트는 단순한 프레임워크를 넘어, 미리 작성된 함수와 코드 조각들을 제공하는 강력한 JavaScript 라이브러리입니다.

리액트가 JavaScript 프레임워크 및 라이브러리 중에서 높은 순위를 차지하는 이유에는 재사용 가능한 컴포넌트, 뛰어난 유연성, 코드 안정성, 빠른 속도 및 우수한 성능이 있습니다.

리액트 스타일링은 CSS를 사용하여 리액트 앱 내의 다양한 컴포넌트를 시각적으로 돋보이게 만드는 과정입니다. 리액트는 HTML 대신 JSX(JavaScript XML)를 마크업 언어로 사용한다는 점을 기억해야 합니다. HTML이 클래스를 지정할 때 .class를 사용하는 반면, JSX는 .className을 사용한다는 주요 차이점이 있습니다.

CSS를 사용하여 리액트 스타일링을 해야 하는 이유는 무엇일까요?

  • 앱을 반응형으로 만듭니다. 현대 웹 앱은 다양한 화면 크기에서 접근이 가능해야 합니다. CSS를 이용하면 리액트 앱에 미디어 쿼리를 적용하여 다양한 화면 크기에 유연하게 반응할 수 있습니다.
  • 개발 과정을 단축시킵니다. 리액트 앱의 여러 컴포넌트에서 동일한 CSS 규칙을 재사용할 수 있습니다.
  • 리액트 앱을 유지보수하기 쉽게 만듭니다. CSS를 사용하면 앱의 특정 부분이나 컴포넌트의 디자인을 쉽게 수정할 수 있습니다.
  • 사용자 경험을 향상시킵니다. CSS는 사용자 친화적인 스타일링을 가능하게 합니다. 리액트 앱 내에서 논리적으로 배치된 텍스트와 버튼은 탐색과 사용을 편리하게 만듭니다.

개발자들이 리액트 앱을 스타일링할 때 활용할 수 있는 여러 방법들이 있습니다. 아래에서 가장 보편적인 몇 가지 방법을 소개합니다.

인라인 스타일 작성

인라인 스타일은 외부 스타일시트가 필요 없어 리액트 앱 스타일링을 위한 가장 간단한 방법입니다. CSS 스타일이 리액트 코드 내에 직접 적용됩니다.

인라인 스타일은 다른 스타일보다 우선 순위가 높다는 점을 기억해야 합니다. 따라서 외부 스타일시트에 특정 스타일이 정의되어 있더라도 인라인 스타일이 적용되면 그 스타일이 재정의됩니다.

다음은 리액트 앱에서 인라인 스타일링을 보여주는 예시입니다.

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
    return (
        <>
          <h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
          <h2>Add a little style!</h2>
        </>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

위 예시에서, h1 요소는 밝은 파란색 배경으로 표시됩니다.

인라인 스타일의 장점

  • 신속합니다. 스타일을 적용할 태그에 스타일을 직접 추가하는 가장 단순한 방식입니다.
  • 우선 순위가 높습니다. 인라인 스타일은 외부 스타일시트보다 우선합니다. 전체 앱 디자인을 변경하지 않고 특정 기능에 집중할 때 유용합니다.
  • 프로토타입 제작에 용이합니다. 외부 스타일시트에 스타일을 통합하기 전에 인라인 스타일을 사용하여 기능을 테스트할 수 있습니다.

인라인 스타일의 단점

  • 번거로울 수 있습니다. 모든 태그를 직접 스타일링하는 것은 시간이 많이 소요됩니다.
  • 제한적입니다. 인라인 스타일은 선택자 및 애니메이션 같은 CSS 기능을 사용할 수 없습니다.
  • 많은 인라인 스타일은 JSX 코드를 읽기 어렵게 만들 수 있습니다.

외부 스타일시트 가져오기

CSS를 외부 파일에 작성하고 리액트 앱으로 가져올 수 있습니다. 이 방법은 HTML 문서의 <head> 태그에서 CSS 파일을 가져오는 것과 유사합니다.

이를 위해 앱 디렉토리에 CSS 파일을 만들고 대상 컴포넌트로 가져와 앱에 적용할 스타일 규칙을 작성해야 합니다.

외부 CSS 스타일시트의 작동 방식을 보여주기 위해, App.css라는 CSS 파일을 만들고 다음과 같이 가져올 수 있습니다.

import { React } from "react";
import "./Components/App.css";

function App() {
  return (
    <div className="main">
    </div>
  );
}

export default App;

위의 코드 조각은 외부 스타일시트를 App.js 컴포넌트로 가져옵니다. App.css 파일은 Components 폴더에 위치합니다.

외부 CSS 스타일 시트의 장점

  • 재사용이 가능합니다. 리액트 앱의 여러 컴포넌트에서 동일한 CSS 규칙을 사용할 수 있습니다.
  • 코드를 더 읽기 쉽게 만듭니다. 외부 스타일시트를 사용하면 코드를 이해하기가 훨씬 쉽습니다.
  • 고급 CSS 기능에 접근할 수 있게 해줍니다. 외부 스타일시트에서 의사 클래스와 고급 선택자를 사용할 수 있습니다.

외부 CSS 스타일 시트의 단점

  • 스타일이 재정의되지 않도록 하려면 일관성 있는 명명 규칙이 필요합니다.

CSS 모듈 사용

리액트 앱은 규모가 매우 커질 수 있습니다. CSS 애니메이션 이름과 클래스 이름은 기본적으로 전역 범위로 지정됩니다. 이러한 설정은 하나의 스타일이 다른 스타일을 덮어쓸 수 있어서 대규모 스타일 시트를 다룰 때 문제가 될 수 있습니다.

CSS 모듈은 애니메이션 및 클래스 이름의 범위를 로컬로 지정함으로써 이러한 문제를 해결합니다. 이 접근 방식은 클래스 이름이 필요한 파일이나 컴포넌트 내에서만 사용할 수 있게 합니다. 각 클래스 이름은 고유한 프로그램 이름을 가져서 충돌을 피할 수 있습니다.

CSS 모듈을 구현하려면 파일 이름을 .module.css로 지정합니다. 예를 들어 스타일시트의 이름이 style이라면 파일 이름은 style.module.css가 됩니다.

생성된 파일을 리액트 컴포넌트로 가져오면 바로 사용할 수 있습니다.

CSS 파일은 다음과 같이 작성할 수 있습니다.

/* styles.module.css */
.font {
  color: #f00;
  font-size: 30px;
}

다음과 같이 App.js에서 CSS 모듈을 가져올 수 있습니다.

import { React } from "react";
import styles from "./styles.module.css";

function App() {
    return (
      <h1 className={styles.heading}>Hello koreantech.org reader</h1>
    );
}

export default App;

CSS 모듈 사용의 장점

  • SCSS 및 CSS와 쉽게 통합됩니다.
  • 클래스 이름 충돌을 방지합니다.

CSS 모듈 사용의 단점

  • CSS 모듈을 사용하여 클래스 이름을 참조하는 방식은 초보자에게 혼란스러울 수 있습니다.

스타일 컴포넌트 사용

스타일 컴포넌트를 사용하면 개발자가 자바스크립트 코드 내에서 CSS를 사용하여 컴포넌트를 생성할 수 있습니다. 스타일 컴포넌트는 스타일이 적용된 리액트 컴포넌트 역할을 합니다. 스타일 컴포넌트는 동적 스타일링과 고유한 클래스 이름을 제공합니다.

스타일 컴포넌트 사용을 시작하려면, 루트 폴더에서 다음 명령을 사용하여 패키지를 설치할 수 있습니다.

npm install styled-components

다음 단계는 스타일 컴포넌트를 리액트 앱으로 가져오는 것입니다.

다음은 스타일 컴포넌트를 사용하는 App.js의 코드 조각입니다.

import { React } from "react";
import styled from "styled-components";

function App() {
  const Wrapper = styled.div`
    width: 80%;
    height: 120px;
    background-color: lightblue;
    display: block;
  `;
  return <Wrapper />;
}

export default App;

렌더링된 앱은 스타일 컴포넌트에서 가져온 스타일을 적용합니다.

스타일 컴포넌트의 장점

  • 예측 가능합니다. 스타일링 접근 방식의 스타일이 개별 컴포넌트에 캡슐화됩니다.
  • 클래스 명명 규칙에 집중할 필요가 없습니다. 스타일을 작성하기만 하면 패키지가 나머지를 처리합니다.
  • 스타일 컴포넌트를 props로 내보낼 수 있습니다. 스타일 컴포넌트는 일반 CSS를 리액트 컴포넌트로 변환합니다. 따라서 이 코드를 재사용하고 props를 통해 스타일을 확장하고 내보낼 수 있습니다.

스타일 컴포넌트의 단점

  • 시작하려면 타사 라이브러리를 설치해야 합니다.

구문적으로 멋진 스타일시트 (SASS/SCSS)

SASS는 일반 CSS에는 없는 강력한 도구와 기능을 제공합니다. 이러한 확장 기능을 통해 .scss 및 .sass의 두 가지 다른 스타일로 스타일을 작성할 수 있습니다.

SASS의 구문은 일반 CSS의 구문과 비슷합니다. 하지만 SASS에서 스타일 규칙을 작성할 때는 여는 중괄호와 닫는 중괄호가 필요하지 않습니다.

SASS의 간단한 예시는 다음과 같습니다.

nav
  ul
    margin-right: 20px
    padding: 0
    list-style: list
  li
    display: block
  a
    display: block
    padding: 6px 12px
    text-decoration: underline
nav

리액트 앱에서 SASS를 사용하려면 먼저 SASS를 일반 CSS로 컴파일해야 합니다. Create React App 명령을 통해 앱을 설정한 후 node-sass를 설치하여 컴파일을 처리할 수 있습니다.

npm install node-sass

그런 다음 파일을 만들고 .scss 또는 .sass 확장자를 지정할 수 있습니다. 일반적인 방식으로 파일을 가져올 수 있습니다. 예를 들어 다음과 같습니다.

import "./Components/App.sass";

SASS/SCSS의 장점

  • mixin, 중첩, 확장과 같은 많은 동적 기능을 제공합니다.
  • SASS/SCSS를 사용하면 CSS 코드를 작성할 때 필요한 상용구 코드가 줄어듭니다.

SASS/SCSS의 단점

  • 스타일이 전역적이므로 덮어쓰기 문제가 발생할 수 있습니다.

가장 적합한 스타일링 방법은 무엇일까요?

지금까지 다섯 가지 접근 방식을 살펴보았으므로 어떤 방법이 가장 좋은지 궁금하실 겁니다. 특정 방법을 최고로 꼽기는 어렵습니다. 그러나 다음 사항을 고려하면 합리적인 결정을 내리는 데 도움이 될 수 있습니다.

  • 성능 지표
  • 디자인 시스템의 필요성
  • 코드 최적화의 용이성

인라인 스타일은 몇 줄의 코드로 간단한 앱을 만들 때 적합합니다. 반면에, 외부 스타일시트, SASS, 스타일 컴포넌트 및 CSS 모듈은 대규모 앱에 더 적합합니다.

대규모 리액트 애플리케이션에서 CSS를 유지 관리하기 위한 모범 사례는 무엇일까요?

  • 인라인 스타일을 피하십시오. 대규모 리액트 앱에서 모든 태그에 대한 인라인 CSS 스타일을 작성하는 것은 매우 번거로울 수 있습니다. 대신 필요에 맞는 외부 스타일시트를 활용하십시오.
  • 코드를 린트하십시오. Stylelint와 같은 린터는 코드에서 스타일 오류를 강조 표시하여 초기 단계에서 수정할 수 있도록 합니다.
  • 정기적인 코드 검토를 수행하십시오. CSS 작성은 재미있을 수 있지만 정기적인 코드 검토를 통해 버그를 더 쉽게 식별할 수 있습니다.
  • CSS 파일에 대한 테스트를 자동화하십시오. Enzyme 및 Jest는 CSS 코드 테스트를 자동화하는 데 사용할 수 있는 훌륭한 도구입니다.
  • 코드를 간결하게 유지하십시오. 색상 및 여백과 같이 일반적으로 사용되는 스타일을 처리할 때 DRY(Don’t Repeat Yourself) 원칙에 따라 유틸리티 변수 및 클래스를 사용하십시오.
  • Block Element Modifier와 같은 명명 규칙을 사용하십시오. 이러한 접근 방식을 통해 이해하고 재사용하기 쉬운 CSS 클래스를 더 쉽게 작성할 수 있습니다.

결론

위에 제시된 방법들은 리액트에서 스타일을 지정하는 데 사용할 수 있는 여러 가지 방법들 중 일부입니다. 스타일링 방법을 선택하는 것은 여러분의 필요, 기술 및 선호도에 달려 있습니다. 리액트 앱에서 인라인 및 외부 스타일시트와 같은 여러 스타일링 접근 방식을 함께 사용하는 것도 가능합니다.

프론트엔드 개발자를 위한 최고의 CSS 프레임워크와 라이브러리를 탐색해볼 수도 있습니다.