[React] 리액트에서 스타일을 적용하는 두 가지 방법

 

리액트에서 스타일을 적용하는 방법은 크게 두 가지가 있습니다. 

1. JSX 내부에서 style 객체 사용하기 
2. 외부 CSS 파일을 만들어서 불러오기 

//JSX 스타일 객체방식 
<section style={styles.aboutSection}> 


//외부 CSS 파일과 className
<section className="about-section">

 

 

1. JSX 내부에서 style 객체 사용하기

style={{ ... }} 또는 style={styles.이름} → JSX 안에서 직접 스타일을 작성

 

변환한 스타일 객체

const styles = {
  aboutSection: {
    padding: '2rem',
    backgroundColor: '#fefefe',
    border: '1px solid #ddd',
    borderRadius: '8px',
    marginTop: '2rem',
  },
  heading: {
    color: 'red',
    marginBottom: '1rem',
  },
};

function About() {
  return (
    <section style={styles.aboutSection}>
      <h2 style={styles.heading}>About Me</h2>
      <p>....</p>
    </section>
  );
}

변환 규칙

• CSS 속성명은 kebab-case에서 camelCase로 변경
  예: background-color → backgroundColor
• 값이 단위를 가진 경우 문자열 ' ' 로 작성
  예: '2rem', '1px solid #ddd'
• 자식 요소 스타일은 별도의 스타일 객체로 분리

2. 외부 CSS 파일과 className 사용하기

리액트에서는 CSS 파일을 컴포넌트와 같은 폴더에 두고 관리할 수도 있습니다.

className="..." → 외부 CSS 파일을 사용할 때

 

폴더 구조

src/
 ├── components/
 │    ├── About.jsx
 │    └── About.css

About.css 파일 내용

.about-section {
  padding: 2rem;
  background-color: #fefefe;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 2rem;
}

.about-section h2 {
  color: red;
  margin-bottom: 1rem;
}

About.jsx 파일에서 CSS 임포트

import React from 'react';
import './About.css';

function About() {
  return (
    <div className="about-section">
      <h2>About Title</h2>
      {/* 내용 */}
    </div>
  );
}

export default About;

 

• CSS 파일을 import './About.css'; 구문으로 불러옵니다. 
• 일반 CSS처럼 클래스 이름으로 스타일을 지정하면 됩니다.

언제 어떤 방식이 더 좋을까?

상황	추천방식
스타일이 재사용되거나 복잡함	CSS 파일 (className) 사용
한 컴포넌트 안에서만 쓰는 간단한 스타일	style 객체 사용
스타일 충돌을 피하고 싶음	style 객체 or CSS Module