🚀 4단계: React Router, API 연동(Fetch/Axios) 배우기

✅ 1️⃣ React Router란?
✅ 2️⃣ React Router를 사용한 페이지 이동 구현
✅ 3️⃣ API 연동 개념 (fetch, axios)
✅ 4️⃣ 실습 프로젝트: React Router + API 연동

---

1️⃣ React Router란?

🔹 React Router의 역할

• React는 **싱글 페이지 애플리케이션(SPA)**으로, URL이 변경되어도 전체 페이지를 새로고침하지 않음
• react-router-dom을 사용하면 컴포넌트 기반으로 페이지 이동 가능

🔹 React Router 설치하기

📌 터미널에서 실행

npm install react-router-dom

---

2️⃣ React Router를 사용한 페이지 이동 구현

🔹 기본적인 라우팅 설정

📌 예제 코드 (App.js)

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

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

function About() {
  return <h2>소개 페이지</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

✅ React Router를 사용하면 Link 컴포넌트를 통해 페이지 이동 가능!

---

🔹 동적 라우트(Dynamic Route) 사용하기

📌 예제 코드 (User.js)

import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams();
  return <h2>사용자 ID: {id}</h2>;
}

export default User;

 

📌 라우팅 설정 (App.js)

<Routes>
  <Route path="/user/:id" element={<User />} />
</Routes>

✅ /user/123으로 접속하면 사용자 ID: 123이 출력됨!

---

3️⃣ API 연동 개념 (fetch, axios)

React에서 API를 호출할 때 두 가지 방법을 사용할 수 있음.

🔹 fetch를 사용한 API 호출

📌 예제 코드 (fetch 활용)

import { useState, useEffect } from "react";

function FetchExample() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return <div>{data ? <p>{data.title}</p> : <p>Loading...</p>}</div>;
}

export default FetchExample;

✅ fetch는 내장 함수로 추가 라이브러리 없이 API 호출 가능!

---

🔹 axios를 사용한 API 호출

📌 설치 (터미널)

npm install axios

 

📌 예제 코드 (axios 활용)

import { useState, useEffect } from "react";
import axios from "axios";

function AxiosExample() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => setData(response.data));
  }, []);

  return <div>{data ? <p>{data.title}</p> : <p>Loading...</p>}</div>;
}

export default AxiosExample;

✅ axios는 fetch보다 코드가 간결하고 오류 처리가 쉬움!

---

4️⃣ 실습 프로젝트: React Router + API 연동

이제 React Router와 API 연동을 결합한 간단한 프로젝트를 만들어보자!

🔹 프로젝트: 사용자 목록 페이지 & 상세 페이지 만들기

1. /users → 사용자 목록 페이지 (API에서 사용자 데이터 가져오기)
2. /users/:id → 개별 사용자 상세 정보 페이지

📌 설치

npm install react-router-dom axios

 

📌 사용자 목록 페이지 (Users.js)

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users")
      .then((res) => setUsers(res.data));
  }, []);

  return (
    <div>
      <h2>사용자 목록</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Users;

 

📌 사용자 상세 페이지 (UserDetail.js)

import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";

function UserDetail() {
  const { id } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    axios.get(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then((res) => setUser(res.data));
  }, [id]);

  return (
    <div>
      {user ? (
        <div>
          <h2>{user.name}</h2>
          <p>Email: {user.email}</p>
          <p>Phone: {user.phone}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default UserDetail;

 

📌 라우팅 설정 (App.js)

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/users">사용자 목록</Link>
      </nav>
      <Routes>
        <Route path="/" element={<h1>홈 페이지</h1>} />
        <Route path="/users" element={<Users />} />
        <Route path="/users/:id" element={<UserDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

✅ /users에 접속하면 사용자 목록이 표시되고, 개별 사용자 클릭 시 상세 페이지로 이동!

---

🎯 마무리: React Router & API 연동 정리

✅ React Router를 사용하면 페이지 이동이 가능!
✅ fetch와 axios를 사용해 API 데이터를 가져올 수 있음!
✅ 실습 프로젝트를 통해 실제 데이터를 기반으로 동적인 React 앱을 만들 수 있음!

🔥 이제 React Router와 API 연동을 활용한 실전 프로젝트를 만들어보자! 🚀

 

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