React 무료로 배울 수 있나요?

네, 코드마스터의 React 강의는 전부 무료입니다. 광고도 없습니다. 개념노트는 로그인 없이 열람할 수 있습니다.

React 초보자도 따라갈 수 있나요?

네. 모든 레슨이 개념 설명 → 코드 예시 → 인터랙티브 데모 → 확인 퀴즈 순서로 구성되어 있어 사전 지식 없이도 따라올 수 있습니다.

React 학습에 얼마나 걸리나요?

각 레슨은 평균 30~60분 분량입니다. 하루 1~2개 기준 약 1~2개월이면 카테고리 전체를 완주할 수 있습니다.

JavaScript

JSX 문법

💡 왜 배워야 할까요?

🎯 React로 웹사이트를 만들려면 필수 문법입니다.

💼 HTML과 JavaScript를 섞어 쓰므로 배우기 쉽습니다.

⚡ 모든 React 개발자가 매일 사용하는 기본 스킬입니다.

🏢 실무에서는

실무에서는 JSX로 버튼, 폼, 카드 같은 UI를 만듭니다. 예를 들어 쇼핑몰 개발자는 JSX로 상품 목록 화면을 작성하고, 이를 JavaScript 코드로 변환하여 브라우저에 표시합니다.

JSX가 뭔가요? — HTML처럼 생긴 JavaScript

JSX는 JavaScript 안에서 HTML처럼 UI를 작성하는 문법이에요.

jsx

// 이게 JSX — HTML이 아닌 JavaScript 코드예요!
const element = <h1>안녕하세요!</h1>;

브라우저는 JSX를 모르기 때문에 Vite/Webpack이 자동으로 변환해줘요:

// 실제로 이렇게 변환됨 (우리가 볼 필요 없음)
const element = React.createElement('h1', null, '안녕하세요!');

> 💡 그냥 "HTML처럼 쓰면 되는 것"으로 이해하면 충분해요.

JSX에서 JavaScript 쓰기 — 중괄호 {}

JSX 안에서 JavaScript 표현식을 쓰려면 중괄호 {} 를 사용해요.

jsx

const name = "홍길동";
const age = 25;

// {} 안에 JS 값/식 넣기
return (
  <div>
    <h1>안녕하세요, {name}님!</h1>
    <p>나이: {age}살</p>
    <p>내년 나이: {age + 1}살</p>
    <p>성인 여부: {age >= 18 ? "성인" : "미성년자"}</p>
  </div>
);

💻 JSX 규칙 모음

// ✅ 1. 반드시 하나의 부모 태그로 감싸기
return (
  <div>          {/* 부모 태그 */}
    <h1>제목</h1>
    <p>내용</p>
  </div>
);

// ✅ 2. class → className (class는 JS 예약어)
return <div className="container">내용</div>;

// ✅ 3. 셀프 클로징 태그는 / 필수
return <img src="photo.jpg" />;   // HTML에선 />없어도 되지만 JSX는 필수

// ✅ 4. 스타일은 객체로
return (
  <h1 style={{ color: 'red', fontSize: '24px' }}>
    빨간 제목
  </h1>
);

⚛️ React 패턴 — JSX 문법

JSX 문법을 React에서 어떻게 쓰는지 코드와 함께 단계별로 익혀보세요.

1 🧩 1. JSX 문법 사용 시나리오

이 기능이 필요한 상황.

↓

2 💻 2. 코드 작성

JSX 문법의 기본 사용법.

↓

3 🎨 3. 렌더링 결과

사용자가 보는 화면.

↓

4 💡 4. 실무 팁

흔한 함정과 베스트 프랙티스.

🎮 JSX 문법 — 단계별 이해

각 단계를 클릭해 내용을 읽고 ✓ 이해했어요 버튼으로 진행률을 확인하세요.

🖥️ 실행 결과 — 렌더링된 React 컴포넌트

✏️ React 코드 수정하기 (클릭해서 열기)

const toggle = (i) => {
    const n = new Set(checked);
    n.has(i) ? n.delete(i) : n.add(i);
    setChecked(n);
  };

const progress = (checked.size / steps.length) * 100;
  const accent = '#94a3b8';

return (
    <div style={{padding:16, fontFamily:"'Pretendard',sans-serif", fontSize:13}}>
      <h2 style={{margin:"0 0 12px", color:accent}}>🎯 JSX 문법</h2>

{/* 진행 바 */}
      <div style={{background:"#1e293b", height:8, borderRadius:4, marginBottom:8}}>
        <div style={{width: progress+"%", height:"100%", background:accent, borderRadius:4, transition:"0.3s"}} />
      </div>
      <div style={{fontSize:11, opacity:0.7, marginBottom:12}}>진행: {checked.size}/{steps.length} ({progress.toFixed(0)}%)</div>

{/* 탭 */}
      <div style={{display:"flex", gap:4, marginBottom:10, flexWrap:"wrap"}}>
        {steps.map((s, i) => (
          <button key={i} onClick={() => setActiveTab(i)}
            style={{padding:"6px 10px", fontSize:11, border:"none", borderRadius:4,
              background: activeTab === i ? accent : (checked.has(i) ? "#065f46" : "#334155"),
              color:"white", cursor:"pointer"}}>
            {s.icon} {i+1}. {s.title.substring(0, 15)}
          </button>
        ))}
      </div>

{/* 활성 탭 내용 */}
      {steps[activeTab] && (
        <div style={{padding:14, background:"#1e293b", borderRadius:8, borderLeft:"4px solid "+accent}}>
          <div style={{fontSize:16, fontWeight:"bold", marginBottom:8}}>{steps[activeTab].icon} {steps[activeTab].title}</div>
          <div style={{fontSize:12, lineHeight:1.6, opacity:0.9}}>{steps[activeTab].body}</div>
          {steps[activeTab].code && (
            <pre style={{marginTop:10, padding:10, background:"#0a0f1a", borderRadius:4, fontSize:11, overflow:"auto", color:"#a5f3fc"}}>
              <code>{steps[activeTab].code}</code>
            </pre>
          )}
          <button onClick={() => toggle(activeTab)}
            style={{marginTop:10, padding:"6px 14px", fontSize:12, border:"none", borderRadius:4,
              background: checked.has(activeTab) ? "#ef4444" : "#10b981", color:"white", cursor:"pointer"}}>
            {checked.has(activeTab) ? "✕ 체크 해제" : "✓ 이해했어요"}
          </button>
        </div>
      )}

{checked.size === steps.length && (
        <div style={{marginTop:14, padding:14, background:"linear-gradient(135deg,#10b981,#059669)", color:"white", borderRadius:8, textAlign:"center"}}>
          <div style={{fontSize:18, fontWeight:"bold"}}>🎉 모든 단계 완료!</div>
          <div style={{fontSize:11, marginTop:4}}>다음 lesson으로 진행할 준비가 됐습니다.</div>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

JSX에서 CSS 클래스를 지정할 때 올바른 방법은?