[LG CNS AM Inspire Camp] 7. React Router와 Todo 리스트 구현

1. React Router란?

React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 관리하는 라이브러리입니다. 기본적으로 싱글 페이지 애플리케이션(SPA)에서는 브라우저의 URL이 변경되더라도 페이지가 새로고침되지 않아야 합니다. React Router는 이를 가능하게 해주는 핵심적인 도구입니다.

1.1. React Router의 주요 개념

• BrowserRouter: HTML5의 History API를 기반으로 라우팅을 관리하는 방식입니다.
• RouterProvider: React Router v6.4부터 새롭게 추가된 기능으로, 데이터 로딩, 에러 핸들링 등을 보다 쉽게 처리할 수 있도록 해줍니다.
• Routes & Route: 특정 URL 패턴에 따라 렌더링할 컴포넌트를 정의합니다.
• useNavigate: 페이지 이동을 위한 Hook입니다.
• useParams: 동적 URL 파라미터를 가져오기 위한 Hook입니다.
• useSearchParams: 쿼리 스트링을 쉽게 다룰 수 있도록 해주는 Hook입니다.

2. React Router 적용하기

2.1. 기본적인 라우팅 설정

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

위 코드에서는 / 경로에 Home 컴포넌트를, /about 경로에 About 컴포넌트를 렌더링하도록 설정합니다.

2.2. 동적 라우팅 적용 (파라미터 사용)

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

const Profile = () => {
  const { userid } = useParams();
  return <h1>{userid}님의 프로필 페이지입니다.</h1>;
};

useParams()를 사용하면 /:userid 형태의 URL에서 userid 값을 가져올 수 있습니다.

3. 영화 조회 서비스 구현

이번 강의에서는 TMDB API를 활용하여 영화 조회 서비스를 구현하였습니다. 사용자가 검색한 영화 제목을 기반으로 영화 목록을 불러오고, 선택한 영화의 상세 정보를 확인할 수 있도록 만들었습니다.

3.1. 영화 검색 기능 구현

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

export default function MovieList() {
  const [title, setTitle] = useState("");
  const [movies, setMovies] = useState([]);
  const [isSearch, setIsSearch] = useState(false);

  const searchMovie = () => {
    setIsSearch(true);
    const endpoint = `https://api.themoviedb.org/3/search/movie?api_key=YOUR_API_KEY&query=${title}`;
    axios.get(endpoint)
      .then(res => setMovies(res.data.results))
      .catch(err => console.log(err));
  };

  return (
    <div>
      <h1>영화 조회</h1>
      <input type="text" value={title} onChange={e => setTitle(e.target.value)} />
      <button onClick={searchMovie}>조회</button>
      {movies.map(m => (
        <div key={m.id}>
          <h2>{m.title}</h2>
          <p>{m.overview}</p>
        </div>
      ))}
    </div>
  );
}

 

위 코드에서는 axios를 사용하여 TMDB API에서 영화 데이터를 가져오고, 검색 결과를 화면에 표시하도록 만들었습니다.

3.2. 영화 상세 정보 조회

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

export default function MovieDetail() {
  const { movieid } = useParams();
  const [movie, setMovie] = useState(null);

  useEffect(() => {
    const endpoint = `https://api.themoviedb.org/3/movie/${movieid}?api_key=YOUR_API_KEY`;
    axios.get(endpoint)
      .then(res => setMovie(res.data))
      .catch(err => console.log(err));
  }, [movieid]);

return movie ? (
    <div>
      <h1>{movie.title}</h1>
      <p>{movie.overview}</p>
    </div>
  ) : (
    <h1>로딩 중...</h1>
  );
}

 

이제 사용자가 특정 영화를 클릭하면 MovieDetail 컴포넌트에서 해당 영화의 상세 정보를 보여줄 수 있습니다.

4. Todo 리스트 기능 구현

4.1. 할 일 목록 만들기

import { useState } from "react";

export default function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "자바스크립트 공부하기", checked: true },
    { id: 2, text: "리액트 공부하기", checked: false }
  ]);

  return (
    <div>
      <h1>할 일 목록</h1>
      {todos.map(todo => (
        <div key={todo.id}>
          <input type="checkbox" checked={todo.checked} />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

4.2. 할 일 추가 기능

const addTodo = text => {
  setTodos([...todos, { id: Date.now(), text, checked: false }]);
};

버튼 클릭 시 새로운 할 일을 추가할 수 있도록 addTodo 함수를 정의하였습니다.

5. 마무리

 

이번 강의를 통해 React Router를 활용한 페이지 이동과 API 연동, 그리고 상태 관리를 통한 UI 구현을 경험하였습니다. 특히, 실제 API를 활용하여 데이터를 불러오고, 동적으로 라우팅을 설정하는 과정을 실습하면서, React 애플리케이션에서 데이터 흐름을 효과적으로 관리하는 방법을 배울 수 있었습니다.

 

앞으로는 이러한 개념들을 프로젝트에 응용하여 더욱 구조적인 코드 작성과 유지보수를 고려한 개발을 진행해야겠다고 느꼈습니다.

---

이 글은 LG CNS AM Inspire Camp 1기 진행 중 Obsidian에 정리해뒀던 글을 블로그에 옮긴 글입니다.