React style component

---

🎨 React 스타일 적용 방식

정의

React에서 스타일 적용은 컴포넌트에 CSS를 연결해 화면의 모양을 제어하는 방식이다.

컴포넌트 구조에 따라 스타일을 분리하거나, 필요한 곳에 직접 적용할 수 있다.

🧩 주요 방식

• 일반 CSS 파일을 import해서 사용한다.
• CSS Module로 클래스 충돌을 줄인다.
• inline style로 간단한 스타일을 바로 적용한다.
• Tailwind 같은 유틸리티 클래스 방식을 사용할 수 있다.

🛠️ inline style

function Box() {
  return (
    <div style=>
      텍스트
    </div>
  );
}

• 객체 형태로 작성한다.
• camelCase 속성명을 사용한다.
• 동적 스타일을 간단하게 적용할 때 편하다.

🧱 CSS 파일 import

import "./App.css";

function App() {
  return <div className="box">내용</div>;
}

• 일반적인 방식으로 스타일을 분리할 수 있다.
• JSX에서는 className을 사용한다.

🧩 CSS Module

• 클래스 이름 충돌을 줄일 수 있다.
• 컴포넌트 단위로 스타일을 관리하기 좋다.

import styles from "./Button.module.css";

function Button() {
  return <button className={styles.primary}>확인</button>;
}

⚖️ 방식 선택 기준

• 간단한 한두 개 스타일은 inline style이 편하다.
• 컴포넌트가 커지면 CSS 파일이나 CSS Module이 더 읽기 좋다.
• 팀 스타일이 Tailwind 기반이면 유틸리티 클래스를 함께 사용한다.

📌 정리

• React 스타일링은 컴포넌트 구조와 함께 고민해야 한다.
• className, inline style, CSS Module의 차이를 알아두면 좋다.
• 프로젝트 규모에 따라 적절한 방식을 선택하는 것이 중요하다.

---

연결문서

• React-Component
• React-JSX
• React-Props
• Tailwind