"스타일링과 CSS"에서는 리액트 애플리케이션의 시각적인 부분을 담당하는 스타일링 기법들을 집중적으로 다룰 차례입니다.
사용자 경험(UX)에 있어 UI의 미적 요소는 매우 중요합니다. 리액트에서 컴포넌트에 스타일을 적용하는 방법은 다양하며, 각각의 장단점이 명확합니다. 이번 장에서는 가장 기본적인 두 가지 방법인 인라인 스타일링(Inline Styling) 과 CSS 클래스(CSS Classes) 사용법에 대해 상세히 알아보겠습니다.
src 폴더에 .css 파일을 생성합니다. (예: src/App.css, src/styles/Button.css)
CSS 파일에 클래스 선택자를 사용하여 스타일 규칙을 작성합니다.
스타일을 적용할 컴포넌트 파일에서 CSS 파일을 import 합니다.
JSX 요소에 className prop을 사용하여 CSS 클래스 이름을 할당합니다. (HTML의 class 속성과 동일)
src/components/CssClassesExample.js
import React from 'react';import './CssClassesExample.css'; // (1) CSS 파일 불러오기function CssClassesExample() { return ( <div className="container"> {/* (2) className prop 사용 */} <h2 className="title">CSS 클래스 예제</h2> <p className="description"> 이것은 CSS 클래스가 적용된 단락입니다. </p> <button className="my-button">클릭하세요</button> <button className="my-button primary">기본 버튼</button> {/* 여러 클래스 적용 가능 */} </div> );}export default CssClassesExample;
모든 CSS 기능 사용 가능: 가상 클래스, 가상 요소, 미디어 쿼리, 키프레임 애니메이션 등 모든 표준 CSS 기능을 제약 없이 사용할 수 있습니다.
클린 코드: JSX 코드에서 스타일이 분리되어 있어 컴포넌트의 구조를 파악하기 용이합니다.
재사용성: 정의된 CSS 클래스를 여러 컴포넌트나 여러 요소에 쉽게 재사용할 수 있습니다.
성능: 브라우저가 CSS를 효율적으로 파싱하고 적용하므로 성능상 이점이 있습니다.
단점
전역 오염 및 클래스 이름 충돌: 일반 CSS 파일을 사용하면 클래스 이름이 전역적으로 유효하기 때문에, 다른 컴포넌트에서 동일한 클래스 이름을 사용하면 스타일이 덮어씌워지는 충돌(Conflict) 이 발생할 수 있습니다. 대규모 프로젝트에서는 클래스 이름 관리가 복잡해집니다.
이를 해결하기 위해 BEM(Block Element Modifier)과 같은 네이밍 컨벤션을 사용하거나, 다음 장에서 다룰 CSS 모듈을 사용합니다.
동적 스타일링의 복잡성: JavaScript 변수에 따른 동적 스타일링이 인라인 스타일링만큼 직관적이지 않습니다. 조건부로 클래스를 추가/제거하는 로직을 작성해야 합니다.
// 예시: 조건부 클래스 적용const Button = ({ isActive }) => { let buttonClasses = "my-button"; if (isActive) { buttonClasses += " active"; // "my-button active" } return <button className={buttonClasses}>버튼</button>;};
또는 clsx나 classnames와 같은 라이브러리를 사용하여 클래스를 조건부로 조합할 수 있습니다.
결론: CSS 클래스는 웹 개발의 표준적인 방식으로, 풍부한 CSS 기능을 활용하고 코드의 구조를 명확히 하는 데 좋습니다. 하지만 전역 스코프로 인한 클래스 이름 충돌 문제가 발생할 수 있어 대규모 프로젝트에서는 이를 해결하기 위한 추가적인 전략이 필요합니다.