[이제와서 시작하는 React 마스터하기 #2] 첫 React 앱 만들어보기

이 포스트를 읽고 나면 ✅ React 개발 환경을 설정할 수 있어요 ✅ 첫 React 앱을 만들 수 있어요 ✅ React가 어떻게 동작하는지 이해할 수 있어요

---

📚 시작하기 전에

이전 포스트 Day 1: React, 왜 배워야 할까요?에서 React가 무엇이고 왜 배워야 하는지 알아봤어요.

이제 직접 React 앱을 만들어볼 시간이에요! 🎉

준비물

• 컴퓨터 (Windows, Mac, Linux 모두 가능)
• 인터넷 연결
• 웹 브라우저 (Chrome, Firefox, Safari 등)
• 텍스트 에디터 (VS Code 추천)
• Node.js 설치 (없다면 nodejs.org에서 다운로드)

Node.js 설치 확인하기:

터미널(또는 명령 프롬프트)을 열고 다음 명령어를 입력해보세요:

node --version

v18 이상이 나오면 준비 완료예요!

---

🚀 React 앱 만들기 (5분이면 충분해요!)

“어려울 것 같은데…“라고 생각하시나요? 걱정하지 마세요! 정말 간단해요.

방법 1: Vite로 시작하기 (추천!) ⚡

Vite는 빠르고 간단한 React 개발 도구예요.

1단계: 프로젝트 만들기

터미널을 열고 다음 명령어를 입력하세요:

npm create vite@latest my-first-react-app -- --template react

2단계: 프로젝트 폴더로 이동

cd my-first-react-app

3단계: 필요한 패키지 설치

npm install

4단계: 개발 서버 시작!

npm run dev

브라우저에서 http://localhost:5173를 열어보세요!

🎉 축하합니다!

화면에 React 로고와 함께 “Vite + React”가 보이나요? 여러분의 첫 React 앱이 실행되고 있어요! 🎊

---

📁 프로젝트 구조 이해하기

VS Code로 my-first-react-app 폴더를 열어보세요. 처음 보는 파일들이 많아서 당황스러울 수 있어요.

걱정하지 마세요! 지금은 이 3개만 알면 돼요:

my-first-react-app/
├── index.html          ← 웹 페이지의 시작점
├── src/
│   ├── main.jsx        ← React 앱을 시작하는 파일
│   └── App.jsx         ← 우리가 주로 작업할 파일! ⭐
└── package.json        ← 프로젝트 정보

나머지 파일들은 나중에 천천히 알아도 괜찮아요!

---

💡 첫 번째 수정: “Hello, React!” 만들기

이제 코드를 직접 수정해볼까요?

따라하기

1단계: src/App.jsx 파일 열기

VS Code에서 src/App.jsx 파일을 열어주세요.

2단계: 코드를 다음과 같이 바꾸기

기존 코드를 모두 지우고 다음 코드를 입력하세요:

function App() {
  return (
    <div>
      <h1>안녕하세요, React!</h1>
      <p>제 첫 React 앱이에요! 🎉</p>
    </div>
  );
}

export default App;

3단계: 저장하기

파일을 저장하세요 (Ctrl+S 또는 Cmd+S)

결과 확인

브라우저를 확인해보세요!

화면이 자동으로 바뀌어서 “안녕하세요, React!”가 보일 거예요.

놀랍지 않나요? 😊

파일을 저장하기만 했는데 브라우저가 자동으로 새로고침됐어요! 이게 React 개발의 마법이에요. ✨

---

🔍 코드 이해하기

“코드가 뭘 의미하는지 궁금해요!”

하나씩 천천히 알아볼게요.

function App() {
  // 이 부분은 함수예요
  return (
    // return 다음에 나오는 게 화면에 보여질 내용이에요
    <div>
      <h1>안녕하세요, React!</h1>
      <p>제 첫 React 앱이에요! 🎉</p>
    </div>
  );
}

export default App;

핵심 포인트

1. function App(): 컴포넌트를 만드는 함수예요
2. return (...): 화면에 표시할 내용을 반환해요
3. <div>, <h1>, <p>: HTML과 비슷하게 생겼죠? 이게 JSX예요!
4. export default App: 다른 파일에서 이 컴포넌트를 사용할 수 있게 해줘요

잠깐! JSX가 뭐냐고요?

JSX는 JavaScript 안에서 HTML처럼 쓸 수 있게 해주는 문법이에요. 지금은 “JavaScript + HTML = JSX”라고만 기억하세요!

---

💪 실습 1: 나만의 소개 페이지 만들기

이제 여러분 차례예요!

해보기

App.jsx 파일을 수정해서 나만의 소개 페이지를 만들어보세요.

힌트:

• <h1>: 큰 제목
• <h2>: 작은 제목
• <p>: 문단
• <ul>, <li>: 목록

예시:

function App() {
  return (
    <div>
      <h1>안녕하세요! 저는 [이름]입니다</h1>
      <p>[자기소개를 써보세요]</p>

      <h2>좋아하는 것들</h2>
      <ul>
        <li>☕ 커피</li>
        <li>💻 코딩</li>
        <li>🎮 게임</li>
      </ul>
    </div>
  );
}

export default App;

결과 확인

파일을 저장하고 브라우저를 확인해보세요! 여러분만의 소개 페이지가 만들어졌나요? 🎉

---

💪 실습 2: 스타일 추가하기

“글자 색깔을 바꾸고 싶어요!”

좋아요! 스타일을 추가해봅시다.

따라하기

JSX에서는 style 속성으로 스타일을 줄 수 있어요.

function App() {
  return (
    <div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
      <h1 style={{ color: '#0066cc' }}>안녕하세요, React!</h1>
      <p style={{ fontSize: '18px', color: '#333' }}>
        제 첫 React 앱이에요! 🎉
      </p>
    </div>
  );
}

export default App;

중요한 점:

• style={{ ... }}처럼 중괄호가 두 번 들어가요
• CSS 속성 이름이 조금 달라요: background-color → backgroundColor
• 값은 따옴표 안에 문자열로 써요: '20px', '#0066cc'

결과 확인

색상이 바뀌었나요? 마음에 드는 색으로 바꿔보세요! 🎨

---

🎯 실습 3: 변수 사용하기

React의 진짜 힘은 데이터를 화면에 보여주는 것이에요!

따라하기

function App() {
  const name = "박코딩";
  const age = 25;
  const hobbies = ["코딩", "독서", "운동"];

  return (
    <div style={{ padding: '20px' }}>
      <h1>안녕하세요, {name}입니다!</h1>
      <p>나이: {age}살</p>

      <h2>취미</h2>
      <ul>
        <li>{hobbies[0]}</li>
        <li>{hobbies[1]}</li>
        <li>{hobbies[2]}</li>
      </ul>
    </div>
  );
}

export default App;

핵심 포인트

중괄호 {} 안에 JavaScript 변수나 표현식을 넣을 수 있어요!

<h1>{name}</h1>           // 변수
<p>{age + 5}살</p>        // 계산
<p>{name.toUpperCase()}</p> // 함수 호출

직접 해보기

위 코드에서 name, age, hobbies를 여러분의 정보로 바꿔보세요!

---

⚠️ 자주 하는 실수

실수 1: 여러 요소를 반환하려고 하기

// ❌ 이렇게 하면 에러가 나요!
function App() {
  return (
    <h1>제목</h1>
    <p>내용</p>
  );
}

// ✅ 이렇게 하나의 요소로 감싸야 해요
function App() {
  return (
    <div>
      <h1>제목</h1>
      <p>내용</p>
    </div>
  );
}

왜 그럴까요?

React 컴포넌트는 하나의 요소만 반환할 수 있어요. 여러 요소를 반환하려면 <div>로 감싸거나, <>(Fragment)를 사용하세요.

// 또는 Fragment 사용
function App() {
  return (
    <>
      <h1>제목</h1>
      <p>내용</p>
    </>
  );
}

실수 2: 중괄호를 잊어버리기

// ❌ 변수가 그대로 텍스트로 나와요
<h1>안녕하세요, name입니다</h1>

// ✅ 중괄호로 감싸야 해요
<h1>안녕하세요, {name}입니다</h1>

실수 3: JavaScript와 다른 속성 이름

// ❌ HTML에서는 class지만
<div class="container">

// ✅ JSX에서는 className이에요
<div className="container">

자주 쓰이는 다른 속성들:

• class → className
• for → htmlFor
• onclick → onClick

---

📝 정리

자, Day 2를 마무리할 시간이에요!

오늘 배운 내용 체크리스트

• React 개발 환경을 설정했어요
• 첫 React 앱을 만들었어요
• JSX가 무엇인지 이해했어요
• 컴포넌트가 무엇인지 알았어요
• 변수를 화면에 표시하는 방법을 배웠어요

핵심 요약 3줄

1. React 앱 만들기: npm create vite@latest로 간단하게 시작
2. 컴포넌트: function으로 만들고 JSX를 return해요
3. JSX: HTML처럼 생겼지만 JavaScript 안에서 쓸 수 있어요. {변수}로 값을 표시!

💪 숙제 (선택사항)

시간이 있다면 이것들을 해보세요:

1. 나만의 명함 만들기
   • 이름, 이메일, 소개, 기술 스택을 보여주는 간단한 페이지
2. 좋아하는 영화/책 목록 만들기
   • 배열을 사용해서 여러 항목을 표시해보세요
3. 계산기 UI 만들기 (화면만!)
   • 버튼과 디스플레이를 JSX로 구성해보세요
   • 아직 동작하지 않아도 괜찮아요! 모양만 만들어보세요

---

🚀 다음 단계

축하합니다! 첫 React 앱을 만들었어요! 🎉

하지만 아직 화면이 고정되어 있어요. 버튼을 클릭해도, 입력을 해도 아무 일도 일어나지 않죠?

다음 포스트에서는 useState를 배워서 화면이 변하는 인터랙티브한 앱을 만들어볼 거예요!

➡️ Day 3: useState - 화면을 움직이게 만들기에서 만나요!

---

💬 처음에는 다들 낯설어요

JSX가 이상하게 느껴지나요? 당연해요! 저도 처음엔 “왜 JavaScript에 HTML을 섞어?”라고 생각했어요.

하지만 몇 번 써보면 금방 익숙해져요. 코드를 직접 타이핑하면서 손에 익히는 게 가장 빨라요! ⌨️

에러가 나도 괜찮아요. 에러 메시지를 읽고, 구글에 검색하고, 고쳐보는 과정이 성장의 지름길이에요! 💪

---

🎓 시리즈 목록

Phase 1: React 기초 (Day 1-8)

1. React, 왜 배워야 할까요?
2. 첫 React 앱 만들어보기 (현재 포스트)
3. Props와 State 완벽 이해하기
4. Hooks 완벽 가이드
5. 조건부 렌더링과 리스트 렌더링
6. 컴포넌트 생명주기 이해하기
7. Context API로 전역 상태 관리하기
8. Custom Hooks 만들기

Phase 2: React 활용 (Day 9-14)

1. React Router로 SPA 만들기
2. 폼과 유효성 검사
3. 성능 최적화 기법
4. 에러 처리와 경계
5. Ref와 DOM 접근
6. Portals와 고급 패턴

Phase 3: React 심화 (Day 15-20)

1. TypeScript와 React
2. 상태 관리 라이브러리
3. 서버 상태 관리 (TanStack Query)
4. 테스팅 전략
5. SSR과 Next.js 기초
6. 배포와 DevOps

---

🔗 유용한 리소스

• React 공식 문서 - 시작하기 - 공식 튜토리얼
• Vite 공식 문서 - Vite 사용법
• VS Code 다운로드 - 추천 에디터
• Node.js 다운로드 - Node.js 설치

추천 VS Code 확장 프로그램

• ES7+ React/Redux/React-Native snippets: React 코드 자동완성
• Prettier: 코드 자동 포맷팅
• ESLint: 코드 오류 검사