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

웹사이트의 97% 이상이 스타일링에 CSS를 사용한다는 사실을 알고 계셨나요?

Cascading Style Sheets 또는 CSS를 사용하면 개발자가 보기 좋고 스캔 및 표시할 수 있는 웹 페이지를 구축할 수 있습니다.

CSS 언어는 문서가 사용자에게 표시되는 방식을 지정합니다. 이 경우 문서는 XML 또는 HTML과 같은 마크업 언어로 작성된 파일입니다.

React에서 스타일링이란?

React 앱의 생성, 실행 및 유지 관리의 단순성은 인기의 주된 이유입니다. React는 프레임워크가 아닌 JavaScript 라이브러리로, 미리 작성된 함수와 코드 스니펫 이상의 기능을 제공합니다.

재사용 가능한 구성 요소의 가용성, 유연성, 코드 안정성, 속도 및 성능은 React가 JavaScript 프레임워크 및 라이브러리에서 높은 순위를 차지하는 이유 중 일부입니다.

React의 스타일링은 CSS를 사용하여 React 앱의 다양한 구성 요소를 시각적으로 매력적으로 만드는 과정입니다. 그러나 React는 마크업 언어로 HTML 대신 JSX(JavaScript 및 XML)를 사용한다는 점은 주목할 가치가 있습니다. 주요 차이점 중 하나는 HTML이 .class를 사용하여 클래스에 레이블을 지정하는 반면 JSX는 .ClassName을 사용하여 동일한 것을 표시한다는 것입니다.

CSS를 사용하여 React 스타일을 지정해야 하는 이유는 무엇입니까?

앱을 반응형으로 만드세요. 최신 웹 앱은 작은 화면과 큰 화면 모두에서 액세스할 수 있어야 합니다. CSS를 사용하면 React 앱에 미디어 쿼리를 적용하고 다양한 화면 크기에 반응하도록 할 수 있습니다.
개발 프로세스를 가속화하십시오. React 앱의 여러 구성 요소에서 동일한 CSS 규칙을 사용할 수 있습니다.
React 앱을 유지 관리 가능하게 만드십시오. CSS를 사용하면 앱의 특정 구성 요소/부분의 모양을 쉽게 변경할 수 있습니다.
향상된 사용자 경험. CSS는 사용자에게 친숙한 서식을 허용합니다. 논리적 위치에 텍스트와 버튼이 있는 React는 탐색하고 사용하기 쉽습니다.

개발자가 React 앱의 스타일을 지정하는 데 사용할 수 있는 몇 가지 접근 방식이 있습니다. 다음은 가장 일반적인 것 중 일부입니다.

학교 크롬북에서 관리자를 우회하는 방법

인라인 스타일 작성

인라인 스타일은 사용자가 외부 스타일시트를 생성할 필요가 없기 때문에 React 앱의 스타일을 지정하는 가장 쉬운 방법입니다. CSS 스타일은 React 코드에 직접 적용됩니다.

인라인 스타일이 다른 스타일보다 우선 순위가 높다는 점은 주목할 가치가 있습니다. 따라서 일부 서식이 있는 외부 스타일 시트가 있는 경우 인라인 스타일로 재정의됩니다.

이것은 React 앱의 인라인 스타일링 데모입니다.

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를 작성하고 React 앱으로 가져올 수 있습니다. 이 접근 방식은 HTML 문서의 태그에서 CSS 파일을 가져오는 것과 비슷합니다.

이를 위해서는 앱 디렉토리에 CSS 파일을 생성하고 대상 구성 요소로 가져와서 앱에 대한 스타일 규칙을 작성해야 합니다.

외부 CSS 스타일시트가 작동하는 방법을 보여주기 위해 CSS 파일을 만들고 이름을 App.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 스타일 시트의 장점

재사용 가능. React 앱의 여러 구성 요소에서 동일한 CSS 규칙을 사용할 수 있습니다.
코드를 더 보기 쉽게 만듭니다. 외부 스타일시트를 사용하면 코드를 쉽게 이해할 수 있습니다.
고급 CSS 기능에 대한 액세스를 제공합니다. 외부 스타일 시트를 사용할 때 의사 클래스 및 고급 선택기를 사용할 수 있습니다.

외부 CSS 스타일 시트의 단점

스타일이 재정의되지 않도록 하려면 신뢰할 수 있는 명명 규칙이 필요합니다.

WhatsApp에서 연락처를 찾는 방법

CSS 모듈 사용

React 앱은 정말 커질 수 있습니다. CSS 애니메이션 이름과 클래스 이름은 기본적으로 전역적으로 범위가 지정됩니다. 하나의 스타일이 다른 스타일을 무시할 수 있으므로 이 설정은 큰 스타일 시트를 처리할 때 문제가 될 수 있습니다.

CSS 모듈은 애니메이션 및 클래스 이름의 범위를 로컬로 지정하여 이 문제를 해결합니다. 이 접근 방식은 클래스 이름이 필요한 파일/구성 요소 내에서만 사용할 수 있도록 합니다. 각 클래스 이름은 고유한 프로그램 이름을 가져 충돌을 피합니다.

CSS 모듈을 구현하려면 .module.css로 파일을 만듭니다. 스타일시트의 이름을 style로 지정하려면 파일 이름이 style.module.css가 됩니다.

생성된 파일을 React 구성 요소로 가져오면 시작할 준비가 된 것입니다.

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 모듈을 사용하여 클래스 이름을 참조하는 것은 초보자에게 혼란스러울 수 있습니다.

스타일 구성 요소 사용

스타일이 지정된 구성 요소를 사용하면 개발자가 JavaScript 코드에서 CSS를 사용하여 구성 요소를 만들 수 있습니다. 스타일 구성 요소는 스타일과 함께 제공되는 React 구성 요소 역할을 합니다. Styled Components는 동적 스타일과 고유한 클래스 이름을 제공합니다.

Styled Components 사용을 시작하려면 다음 명령을 사용하여 루트 폴더에 패키지를 설치할 수 있습니다.

npm install styled-components

다음 단계는 Styled Components를 React 앱으로 가져오는 것입니다.

다음은 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;

렌더링된 앱에는 Styled Components에서 가져온 위의 스타일이 있습니다.

스타일 구성 요소의 장점

예측 가능합니다. 이 스타일링 접근 방식의 스타일은 개별 구성 요소에 중첩됩니다.
클래스의 명명 규칙에 집중할 필요가 없습니다. 스타일을 작성하기만 하면 패키지가 나머지를 처리합니다.
스타일 구성 요소를 소품으로 내보낼 수 있습니다. Styled Components는 일반 CSS를 React 구성 요소로 변환합니다. 따라서 이 코드를 재사용하고 소품을 통해 스타일을 확장하고 내보낼 수 있습니다.

영국 최고의 전용 서버 제공업체 9곳

스타일이 지정된 구성 요소의 단점

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

구문적으로 멋진 스타일 시트(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

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

npm install node-sass

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

import "./Components/App.sass";

SASS/SCSS의 장점

혼합, 중첩 및 확장과 같은 많은 동적 기능이 제공됩니다.
SASS/SCSS를 사용할 때 CSS 코드를 작성하기 위한 상용구가 많지 않습니다.

SASS/SCSS의 단점

스타일은 전역적이므로 무시하는 문제가 발생할 수 있습니다.

가장 좋은 스타일링 방법은 무엇입니까?

다섯 가지 접근 방식에 대해 논의했으므로 어느 것이 가장 좋은지 알고 싶을 것입니다. 이 토론에서 완전한 승자를 강조하기는 어렵습니다. 그러나 다음 사항을 고려하면 정보에 입각한 결정을 내리는 데 도움이 됩니다.

성능 지표
디자인 시스템이 필요한지 여부
코드 최적화 용이성

인라인 스타일은 몇 줄의 코드로 간단한 앱이 있을 때 적합합니다. 그러나 다른 모든 것; 외부, SASS, 스타일 구성 요소 및 CSS 모듈은 큰 앱에 적합합니다.

대규모 React 애플리케이션에서 CSS를 유지하기 위한 모범 사례는 무엇입니까?

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

결론

위는 React의 스타일을 지정하는 데 사용할 수 있는 몇 가지 방법입니다. 스타일링 접근 방식의 선택은 필요, 기술 및 취향에 따라 달라집니다. React 앱에서 인라인 및 외부 스타일 시트와 같은 여러 스타일 접근 방식을 결합할 수도 있습니다.

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