[실무] 02. React 컴포넌트·JSX·CSS 모듈

React JS 실무

React 입문 (2) — 컴포넌트·JSX·CSS 모듈: “화면을 쪼개는 감각”

JSX 문법과 컴포넌트 작성 방식, 그리고 CSS 충돌을 피하는 방법(CSS Modules)을 정리합니다.

범위 기초 핵심 컴포넌트·JSX 스타일 CSS Modules

컴포넌트 트리와 스타일 범위(개념도)

1) JSX는 “HTML처럼 보이는 JavaScript”입니다

JSX는 문법적으로는 JavaScript이고, React가 이를 해석해 DOM을 생성합니다. 그래서 HTML과 비슷하지만 몇 가지 규칙이 있습니다.

• class 대신 className
• 인라인 스타일은 객체 형태: {{`{ color: "tomato" }`}}
• 변수/표현식은 중괄호: {`{name}`}

2) 첫 컴포넌트 만들기(가장 단순한 형태)

export default function Hello() {{
  return <p>Hello</p>;
}}

규칙
컴포넌트 이름은 대문자로 시작해 주세요. (소문자는 HTML 태그로 인식될 수 있습니다.)

3) CSS Modules: “클래스 이름 충돌”을 막는 실전 방법

컴포넌트가 늘어나면 .box 같은 클래스명이 쉽게 충돌합니다. 이때 CSS Modules를 사용하면 안전합니다.

// Hello.module.css
.box {{
  padding: 12px;
  border: 1px solid #e5e7eb;
}}

// Hello.jsx
import styles from "./Hello.module.css";

export default function Hello() {{
  return <div className={{styles.box}}>Hello</div>;
}}

실무에서 자주 하는 정리 기준

• 컴포넌트는 작게: “이름만 보고 역할이 떠오르는 크기”가 유지보수에 좋습니다.
• 스타일은 범위를 분리: 전역 CSS는 최소화하고, 컴포넌트 단위로 관리해 주세요.

참고 링크

• React: JSX 소개
• React: 컴포넌트와 Props
• Create React App: CSS Modules
• DoLearn 커리큘럼(강의 목록)