인라인 스타일링과 CSS 클래스 사용

React에서 컴포넌트에 스타일을 적용하는 방법은 크게 인라인 스타일링과 CSS 클래스 사용으로 나눌 수 있습니다.

각 방법마다의 장단점이 있으며, 상황에 따라 적절히 선택하여 사용할 수 있습니다.

1. 인라인 스타일링

React에서 인라인 스타일링은 JavaScript 객체를 사용하여 정의합니다.

이 방법은 동적 스타일링에 유용하지만, 과도한 사용은 컴포넌트를 복잡하게 만들 수 있습니다.

예제

function InlineStyleComponent() {
  const styles = {
    container: {
      backgroundColor: 'lightblue',
      padding: '20px',
      borderRadius: '5px'
    },
    title: {
      color: 'navy',
      fontSize: '24px'
    }
  };
 
  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Hello, Inline Styling!</h1>
    </div>
  );
}

장점

JavaScript의 모든 기능을 활용할 수 있음 (변수, 조건문 등)
동적 스타일링이 쉬움
CSS-in-JS의 기초가 됨

단점

대규모 애플리케이션에서는 관리가 어려울 수 있음
CSS의 일부 기능(미디어 쿼리, 의사 클래스 등)을 사용하기 어려움
성능상 약간의 오버헤드가 있을 수 있음

2. CSS 클래스 사용

일반적인 CSS 파일을 사용하고 컴포넌트에 클래스를 적용하는 방법입니다. React에서는 class 대신 className 속성을 사용합니다.

예제

styles.css

.container {
  background-color: lightgreen;
  padding: 20px;
  border-radius: 5px;
}
 
.title {
  color: darkgreen;
  font-size: 24px;
}

React 컴포넌트

import './styles.css';
 
function ClassStyleComponent() {
  return (
    <div className="container">
      <h1 className="title">Hello, CSS Classes!</h1>
    </div>
  );
}

장점

기존 CSS 지식을 그대로 활용할 수 있음
스타일과 로직의 분리로 코드 가독성이 향상됨
CSS의 모든 기능을 사용할 수 있음

단점

전역 네임스페이스 문제 (클래스 이름 충돌 가능성)
동적 스타일링이 상대적으로 복잡할 수 있음

3. className 동적 사용 및 조합

React에서는 className을 동적으로 설정하거나 여러 클래스를 조합하여 사용할 수 있습니다.

예제

import './styles.css';
 
function DynamicClassComponent({ isActive, isHighlighted }) {
  const getClassName = () => {
    let classes = 'base-class';
    if (isActive) classes += ' active';
    if (isHighlighted) classes += ' highlight';
    return classes;
  };
 
  // 또는 템플릿 리터럴 사용
  const className = `base-class ${isActive ? 'active' : ''} ${isHighlighted ? 'highlight' : ''}`;
 
  return (
    <div className={getClassName()}>
      <h1>Dynamic Class Names</h1>
    </div>
  );
}

이 방법을 사용하면 컴포넌트의 상태나 props에 따라 동적으로 클래스를 적용할 수 있습니다.

4. 클래스 조합을 위한 유틸리티 사용

클래스 이름을 조합할 때 가독성을 높이고 오류를 줄이기 위해 classnames 라이브러리를 사용할 수 있습니다.

import classNames from 'classnames';
 
function ClassNamesComponent({ isActive, isHighlighted }) {
  const className = classNames('base-class', {
    'active': isActive,
    'highlight': isHighlighted
  });
 
  return (
    <div className={className}>
      <h1>Using classnames library</h1>
    </div>
  );
}

이 라이브러리를 사용하면 조건부 클래스 적용이 더욱 간편해집니다.

결론

React에서 스타일링 방법을 선택할 때는 프로젝트의 규모, 팀의 선호도, 그리고 특정 기능의 요구사항을 고려해야 합니다.

인라인 스타일링은 간단한 동적 스타일링에 유용하지만, 대규모 프로젝트에서는 CSS 클래스를 사용하는 것이 더 관리하기 쉽고 성능상 이점이 있을 수 있습니다.

또한, 이 두 방법을 적절히 조합하여 사용할 수도 있습니다.

예를 들어, 대부분의 스타일은 CSS 클래스로 정의하고, 동적으로 변경되는 일부 스타일만 인라인으로 적용하는 방식을 사용할 수 있습니다.

React 애플리케이션의 스타일링은 단순히 시각적 디자인을 넘어 컴포넌트의 구조와 로직에도 영향을 미치므로, 프로젝트의 요구사항과 개발 방식에 맞는 최적의 접근 방법을 선택하는 것이 중요합니다.

실습 CSS 모듈 소개