🚀 3단계: React 실습 프로젝트 진행하며 개념 정리

✅ 1️⃣ React 실습 프로젝트 추천
✅ 2️⃣ 프로젝트별 주요 개념 정리 (useState, useEffect, React Router, API 연동, Redux)
✅ 3️⃣ 프로젝트 개발 단계 및 학습 전략

---

1️⃣ React 실습 프로젝트 추천

실제 프로젝트를 만들어 보면 React의 개념이 더 쉽게 이해될 거야!
아래 3가지 추천 프로젝트를 따라 하면서 개념을 정리해보자.

📌 1. Todo List (기본 개념 연습: useState, props)

• 주요 기능: 할 일 추가, 삭제, 체크
• 사용 개념: useState로 상태 관리, props로 컴포넌트 간 데이터 전달

📌 예제 코드 (useState 활용)

import { useState } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  const addTodo = () => {
    if (input.trim() === "") return;
    setTodos([...todos, input]);
    setInput("");
  };

  return (
    <div>
      <h2>Todo List</h2>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTodo}>추가</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

✅ React의 기본 개념을 연습하기 가장 좋은 프로젝트!

 

📌 예제 코드 (index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import TodoApp from './TodoApp';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <TodoApp />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

✅ 실행결과

---

📌 2. 간단한 날씨 앱 (API 연동 & useEffect 활용)

• 주요 기능: 사용자가 입력한 도시의 날씨 정보를 가져와 화면에 표시
• 사용 개념: useEffect로 API 호출, fetch 또는 axios 사용

📌 예제 코드 (useEffect + API 호출)

import { useState, useEffect } from "react";

function WeatherApp() {
  const [city, setCity] = useState("Seoul");
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`)
      .then((res) => res.json())
      .then((data) => setWeather(data));
  }, [city]);

  return (
    <div>
      <h2>날씨 앱</h2>
      <input value={city} onChange={(e) => setCity(e.target.value)} />
      {weather && <p>현재 온도: {weather.current.temp_c}°C</p>}
    </div>
  );
}

export default WeatherApp;

✅ 실제 API를 연동하며 useEffect의 개념을 익힐 수 있음!

 

📌 Weather API 가입 하여, API 키 취득. (기본 Traial)

https://www.weatherapi.com/

• YOUR_API_KEY 부분에 발급 받은 KEY 입력

✅ 결과 화면

---

📌 3. 사용자 인증 시스템 (React Router + Redux 활용)

• 주요 기능: 로그인/로그아웃, 사용자 프로필 페이지
• 사용 개념: React Router로 페이지 이동, Redux로 전역 상태 관리

📌 예제 코드 (React Router 활용)

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h2>홈 페이지</h2>;
}

function Profile() {
  return <h2>사용자 프로필</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/profile">프로필</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Router>
  );
}

export default App;

✅ 페이지 간 이동을 연습하면서 React Router의 개념을 익힐 수 있음!

 

---

2️⃣ 프로젝트별 주요 개념 정리

개념설명사용 예제

useState	컴포넌트 내부 상태 관리	Todo List, 날씨 앱
useEffect	컴포넌트가 마운트될 때 실행	API 데이터 불러오기
props	부모 → 자식 컴포넌트 데이터 전달	Todo List, 날씨 앱
React Router	페이지 간 이동 관리	사용자 인증 시스템
Redux	전역 상태 관리	사용자 인증 상태 유지

---

3️⃣ 프로젝트 개발 단계 및 학습 전략

✅ Step 1: 기본 기능부터 구현하기

• 가장 먼저 HTML & CSS로 기본 레이아웃 구성
• React 컴포넌트를 나누고, useState로 상태 관리 적용

✅ Step 2: 데이터 상태 관리 연습하기

• props를 활용해 부모 → 자식 컴포넌트 간 데이터 전달
• useEffect를 사용해 API 호출 후 상태 저장

✅ Step 3: 프로젝트 확장 및 코드 최적화

• React Router를 사용하여 페이지 이동 기능 추가
• Redux 또는 Context API를 사용하여 전역 상태 관리

✅ Step 4: 코드 리팩토링 및 배포하기

• 컴포넌트 재사용성을 고려하여 리팩토링
• Netlify, Vercel 같은 배포 플랫폼에 배포

---

🎯 마무리: 실습 프로젝트를 진행하며 React 개념 정리

🔥 React를 배우는 가장 좋은 방법은 직접 만들어 보는 것!
✅ 간단한 Todo List → API 연동 → 사용자 인증 시스템 순서로 연습
✅ 각 프로젝트에서 useState, useEffect, props, React Router 등을 체험하며 개념 정리
✅ 완성된 프로젝트를 GitHub에 업로드하고, 배포까지 해보자!

🚀 이제 실제로 React 프로젝트를 만들어보면서 실력을 키워보자!