React 무료로 배울 수 있나요?

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

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

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

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

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

JavaScript

React 소개

💡 React를 왜 배워야 하나요?

🎯 프론트엔드 취업 공고의 80%가 React 요구 — 국내 1위 프레임워크

💼 컴포넌트 재사용으로 개발 속도가 일반 HTML의 3~5배

⚡ 네이버, 카카오, 토스, 당근마켓 모두 React 사용

🔗 한 번 배우면 React Native로 앱 개발도 가능

🏢 실무에서는

토스 앱의 송금 화면, 당근마켓의 채팅 UI가 React로 만들어져 있어요

React가 뭔가요? — 레고 블록 비유

React는 UI를 컴포넌트(부품)로 만드는 JavaScript 라이브러리예요.

일반 HTML은 이렇게 만들어요:

html

<!-- 버튼을 100군데 쓰려면 100번 복붙 -->
<button class="btn">좋아요 👍</button>
<button class="btn">좋아요 👍</button>
...

React는 이렇게 만들어요:

jsx

// 버튼 컴포넌트 한 번만 만들고
function LikeButton() {
  return <button>좋아요 👍</button>;
}

// 어디서든 재사용
<LikeButton />
<LikeButton />
<LikeButton />

> 💡 레고 블록처럼 만들어두고 조립하는 방식이에요.

React 시작하기 — Vite로 5분 세팅

① Node.js 설치 (없다면): nodejs.org → LTS 버전 다운로드

② 프로젝트 생성 (터미널에서):

code

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

③ 브라우저에서 http://localhost:5173 열기

> 💡 React 로고가 돌아가는 화면이 뜨면 성공!

💻 첫 번째 React 컴포넌트

// 컴포넌트 = 함수 (대문자로 시작!)
function Greeting() {
  return (
    <div>
      <h1>안녕하세요! 👋</h1>
      <p>나의 첫 React 컴포넌트예요.</p>
    </div>
  );
}

// App 컴포넌트에서 사용
export default function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}

⚛️ React 패턴 — React 소개

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

1 🧩 1. React 소개 사용 시나리오

이 기능이 필요한 상황.

↓

2 💻 2. 코드 작성

React 소개의 기본 사용법.

↓

3 🎨 3. 렌더링 결과

사용자가 보는 화면.

↓

4 💡 4. 실무 팁

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

🎮 React 소개 — 단계별 이해

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

🖥️ 실행 결과 — 렌더링된 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}}>🎯 React 소개</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 — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

React에서 컴포넌트 이름은 어떻게 시작해야 하나요?