React CSS 스타일링 방법 정리

1. Inline 스타일링 (Inline Styles)

Javascript 객체 형태로 스타일을 지정

// App.js
import React from 'react';

function App() {
  const containerStyle = {
    backgroundColor: 'lightblue',
    padding: '20px',
  };

  const textStyle = {
    color: 'darkblue',
    fontSize: '18px',
  };

  return (
    <div style={containerStyle}>
      <p style={textStyle}>안녕하세요, React!</p>
    </div>
  );
}

export default App;

 

2. CSS Modules

CSS Modules는 클래스 이름의 충돌을 방지하기 위해 각 컴포넌트에 고유한 클래스를 생성하는 방법

스타일을 해당 컴포넌트에만 적용

1. App.module.css 파일을 생성하고 스타일을 정의

/* App.module.css */
.container {
  background-color: lightblue;
  padding: 20px;
}

.text {
  color: darkblue;
  font-size: 18px;
}

 

2. React 컴포넌트에서 CSS 모듈을 임포트하여 사용

// App.js
import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.container}>
      <p className={styles.text}>안녕하세요, React!</p>
    </div>
  );
}

export default App;

 

3. Styled-components

스타일을 컴포넌트와 결합하여 CSS를 JavaScript로 작성할 수 있다.

1. styled-components를 설치

npm install styled-components

2. React 컴포넌트에서 스타일을 정의

// App.js
import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  background-color: lightblue;
  padding: 20px;
`;

const Text = styled.p`
  color: darkblue;
  font-size: 18px;
`;

function App() {
  return (
    <Container>
      <Text>안녕하세요, React!</Text>
    </Container>
  );
}

export default App;

 

 

4.'classnames' 라이브러리

조건부로 클래스를 추가하거나 결합할 때 유용하게 사용할 수 있는 라이브러리.

 

1. 라이브러리 설치

npm install classnames

2. 사용 예시

import classnames from 'classnames';

function Button({ primary, disabled }) {
  const buttonClass = classnames({
    'btn': true,         // 기본 클래스
    'btn-primary': primary, // primary가 true일 때 추가
    'btn-disabled': disabled, // disabled가 true일 때 추가
  });

  return <button className={buttonClass}>Click me</button>;
}

 

• btn은 항상 클래스에 포함되고,
• primary가 true일 때 btn-primary가 추가됨
• disabled가 true일 때 btn-disabled가 추가됨

 

3. 활용 예제

3.1 조건부 클래스 추가 (개인적으로 추천)

import classnames from 'classnames';

function Alert({ type, isVisible }) {
  const alertClass = classnames({
    'alert': true,  // 항상 포함
    'alert-success': type === 'success', // success 타입일 때
    'alert-error': type === 'error',    // error 타입일 때
    'hidden': !isVisible,  // isVisible이 false일 때 hidden 클래스 추가
  });

  return <div className={alertClass}>This is an alert!</div>;
}

 

• type이 success일 때 alert-success 클래스가 추가됨
• type이 error일 때 alert-error 클래스가 추가됨
• isVisible이 false일 때 hidden 클래스가 추가됨

3.2 여러 클래스 결합

import classnames from 'classnames';

function Card({ highlighted, large }) {
  const cardClass = classnames(
    'card',                 // 기본 클래스
    { 'card-highlighted': highlighted },  // 조건에 따라 클래스 추가
    { 'card-large': large }  // 조건에 따라 클래스 추가
  );

  return <div className={cardClass}>Card Content</div>;
}

 

3.3 배열로 클래스 결합

import classnames from 'classnames';

function Icon({ size, color }) {
  const iconClass = classnames(
    'icon', 
    size && `icon-${size}`, // size가 있을 때만 크기 클래스 추가
    color && `icon-${color}` // color가 있을 때만 색상 클래스 추가
  );

  return <i className={iconClass}></i>;
}

 

size와 color 값에 따라 동적으로 클래스를 추가할 수 있다.