CSS로 React 구성 요소의 스타일을 지정하는 방법

다양한 기술을 사용하여 React 앱과 페이지의 스타일을 지정할 수 있습니다. 가장 쉬운 방법은 React 구성 요소 라이브러리를 다운로드하는 것입니다. 그러나 라이브러리를 사용하는 경우에도 조만간 사용자 정의 스타일을 추가해야 합니다. 가장 좋은 방법은 무엇입니까?

소규모 프로젝트의 경우 인라인 스타일 , 모듈을 사용하거나 className 사양을 직접 작성하여 앱 스타일을 편안하게 지정할 수 있습니다. 그리고 앱과 같은 동적 프로젝트의 경우 props를 쉽게 구현할 수 있는 라이브러리를 사용하는 것이 좋습니다.

또는 미리 빌드된 스타일과 함께 제공되는 Tailwind UI와 같은 유틸리티 키트를 사용할 수 있습니다. 모형이나 프레젠테이션을 렌더링해야 하는 경우 React 친화적 UI 키트를 사용하는 것이 좋습니다.

className 을 사용한 실용적인 스타일링

React에서는 className 속성을 통해 실용적인 CSS 스타일을 적용합니다.

이것은 또한 프로젝트에 스타일시트를 사용하는 것과 동일합니다. React는 구성 요소 구조에 의해 구동되기 때문에 특정 요구 사항에 대해서만 스타일시트를 가져올 수 있습니다.

예를 들어 보겠습니다.

앱.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

앱.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

결과는 다음과 같습니다.

완전히 유효한 바닐라 기술입니다. 그리고 핵심 구성 요소에서 재사용할 전역 변수를 선언하는 데 가장 자주 사용됩니다.

유일한 주의 사항은 프로젝트가 성장함에 따라 이름 충돌 가능성도 커진다는 것입니다.

마찬가지로 수백 개의 스타일시트를 관리하는 효율성 비용은 터무니없이 높습니다.

인라인 스타일에 JSX 사용

React를 사용하면 인라인 스타일을 사용하여 DOM 요소의 스타일을 지정할 수 있습니다. CSS 로직은 그대로 유지되지만 스타일 자체는 JavaScript를 통과해야 합니다. 이것은 JSX라고도 합니다.

예를 살펴보겠습니다.

헤드라인.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

한 가지 주의할 점은 line-height 를 작성하는 대신 lineHeight 를 사용한다는 것입니다.

이에 대한 설명은 "JSX는 HTML보다 JavaScript에 가깝기 때문에 React DOM은 HTML 속성 이름 대신 camelCase 속성 명명 규칙을 사용합니다."입니다. .

인라인 스타일은 일반적으로 예제를 보여주는 데 사용되지만 특정 요소에 동적 스타일을 추가하는 데도 사용됩니다. 또한 인라인 스타일은 style 만 전달할 수 있으므로 의사 요소 또는 미디어 쿼리를 지원하지 않습니다. 스타일시트를 사용하는 것이 더 나은 대안입니다.

CSS 모듈로 로컬 범위 만들기

이름 충돌 없이 구성 요소에 사용자 정의 스타일을 적용하려면 CSS 모듈을 사용하는 것이 한 가지 방법입니다.

이는 각 구성 요소에 개별적으로 로컬 범위를 적용할 수 있는 접근 방식입니다.

이렇게:

헤더.모듈.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

헤더.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

또한 다른 스타일시트에서 특정 스타일을 호출하는 구성 과 같은 작업을 수행할 수 있으므로 동일한 논리를 두 번 다시 작성할 필요가 없습니다.

 .header { composes: header from './style.css'; }

JS의 CSS

Vue 및 Svelte와 같은 프레임워크와 달리 React는 자체 스타일 인터페이스를 제공하지 않습니다.

따라서 앞서 언급한 방법을 사용하여 구성 요소에 대한 CSS를 작성할 수 있지만 성배 접근 방식은 JS 라이브러리에서 CSS를 사용하는 것입니다. 각 라이브러리에는 장단점이 있지만 일반적으로 이점은 동일하게 유지됩니다.

• 다양한 스타일 변형을 위한 소품.
• 접근 가능한 테마.
• 구성 요소 기반 스타일 범위 지정.
• JavaScript 함수를 사용하는 동적 CSS 변수.

JS에서 CSS를 위한 가장 인기 있는 솔루션은 Styled Components입니다.

그리고 다른 주목할만한 선택에는 감정과 리나리아가 있습니다. 데모를 위해 Styled Components 라이브러리를 사용하여 CSS를 React 구성 요소에 통합하는 방법을 살펴보겠습니다.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

먼저 헤더 제목에 대한 <section> 컨테이너를 렌더링할 HeaderWrapper 라는 새 구성 요소를 만듭니다. 그런 다음 HeaderTitle 이라는 또 다른 구성 요소를 만들고 여기에 CSS 변수를 전달합니다. 따라서 어떤 면에서는 React의 컨텍스트에서만 웹 구성 요소로 작업하는 것과 정확히 동일합니다.

CSS 프레임워크 사용

프론트엔드의 모든 것이 프레임워크와 라이브러리로 이동하는 것은 아닙니다.

아무것도 없는 상태에서 프로젝트를 시작하는 것이 비효율적이라는 사실과 더 관련이 있습니다. Tailwind CSS와 같은 프레임워크는 모든 애플리케이션 구조를 처음부터 작성해야 하는 필요성을 줄이는 데 도움이 됩니다. Tailwind CSS가 작동하는 방식은 프레임워크가 미리 결정된 유틸리티 클래스를 제공하므로 독립적인 CSS를 작성할 필요 없이 레이아웃을 구성할 수 있다는 것입니다.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

따라서 Constants 를 사용하여 구성 요소 스타일을 정의하는 대신 프레임워크에서 지정한 대로 스타일을 직접 작성할 수 있습니다. 이와 같은 방법은 매우 효율적이며 예를 들어 다른 사람이 만든 UI 구성 요소(예: 카드)를 가져올 수 있습니다.

Tailwind CSS는 스니펫을 직접 복사하여 붙여넣을 수 있고 결과 없이 앱 디자인에 사용할 수 있기 때문에 특히 인기가 있습니다.

UI 라이브러리 사용

React 컴포넌트를 스타일링하는 마지막 방법은 UI 라이브러리를 사용하는 것입니다. 프레임워크와 달리 UI 라이브러리는 스타일 지침을 따릅니다. 그래서 많은 면에서 이미 정해진 스타일이 따라옵니다. Mantine 및 Material UI와 같은 것은 선택 사항 중 일부입니다.

유일한 "단점"은 특정 라이브러리를 배우는 데 상당한 시간을 소비해야 한다는 것입니다. 그러나 프레임워크에 대해서도 마찬가지입니다. 진입 장벽에도 불구하고 CSS 프레임워크와 UI 라이브러리는 모두 React 구성 요소를 스타일링하는 데 있어 황금 표준입니다.