Binyard

Appearance

Animal Info Site React SPA Basic2025-08-12 ​

React와 react-router-dom을 학습한 동물 정보 검색 사이트입니다.
동물 목록, 상세 페이지, 검색 기능을 구현하며 SPA 라우팅과 상태 관리를 연습했습니다.

📎 Quick Access


1. 메인 페이지에서 동물 목록 화면에 표시하기 🪧 Milestone 1 ​


주요 구현 포인트 ​

  • 동물 데이터를 map으로 렌더링
  • Link에 /detail/${el.id} 경로를 지정해 카드별 상세 페이지 연결
jsx
// src/page/Main.jsx;
function Main() {
  return (
    <ul>
      {data.map((el) => (
        <li key={el.id}>
          <Link to={`/detail/${el.id}`}>
            <img src={el.img} alt={el.name} />
            <div>{el.name}</div>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default Main;

2. 동물 상세 정보 페이지 만들기 🪧 Milestone 2 ​


주요 구현 포인트 ​

  • Route path="/detail/:id"로 동적 라우팅 설정
  • useParams()를 사용해 URL에서 id 값을 추출
  • id 값과 data.js를 매칭해 해당 동물 데이터 가져오기
jsx
// src/App.jsx
function App() {
  return (
    <>
      <header>
        <h1>💚 동물 조아 💚</h1>
      </header>
      <Routes>
        <Route path="/" element={<Main />}></Route>
        <Route path="/detail/:id" element={<Detail />}></Route>
        <Route path="/search" element={<Search />}></Route>
      </Routes>
      <footer>all rights reserved to OZ</footer>
    </>
  );
}

export default App;
jsx
// src/page/Detail.jsx
function Detail() {
  const params = useParams();
  const animalData = data.find((el) => el.id === Number(params.id));
  return (
    <section className="detail">
      <img src={animalData.img} alt={animalData.name} />
      <h2>{animalData.name}</h2>
      <div>{animalData.description}</div>
    </section>
  );
}

export default Detail;

3. 동물 이름으로 검색기능 & 검색 결과 페이지 생성하기 🪧 Milestone 3 ​


주요 구현 포인트 ​

  • filter()로 이름에 검색어가 포함된 동물만 추출
  • 검색 입력값을 useNavigate로 /search?query=검색어 경로로 이동
  • useSearchParams()를 사용해 URL의 query 값을 읽어옴
jsx
// src/App.jsx
function App() {
  const [inputValue, setInputValue] = useState("");
  const navigate = useNavigate();

  return (
    <>
      <header>
        <h1>💚 동물 조아 💚</h1>
        <input value={inputValue} onChange={(event) => setInputValue(event.target.value)} />
        <button onClick={() => navigate(`/search?animal=${inputValue}`)}>검색</button>
      </header>
      <Routes>
        <Route path="/" element={<Main />}></Route>
        <Route path="/detail/:id" element={<Detail />}></Route>
        <Route path="/search" element={<Search />}></Route>
      </Routes>
      <footer>all rights reserved to OZ</footer>
    </>
  );
}

export default App;
jsx
// src / page / Search.jsx;
function Search() {
  const [searchParams] = useSearchParams();
  const param = searchParams.get("animal");
  const reg = getRegExp(param);

  const filteredData = data.filter((el) => el.name.match(reg));

  return (
    <ul>
      {filteredData.map((el) => (
        <li key={el.id}>
          <Link to={`/detail/${el.id}`}>
            <img src={el.img} alt={el.name} />
            <div>{el.name}</div>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default Search;

📚 Learning Log ​

Reference

SPA 라우팅 ​

  • react-router-dom의 Routes, Route, useParams, useSearchParams
  • 동적 라우팅(/detail/:id)과 쿼리 파라미터(/search?animal=...) 처리

데이터 렌더링 ​

  • .map()으로 리스트 렌더링
  • .filter() + korean-regexp로 한글 초성 검색 구현

URL 기반 상태 관리 ​

  • 검색어를 URL 쿼리로 관리해 새로고침에도 상태 유지

기타 ​

  • GitHub Pages에 SPA 배포 시 base/basename 설정과 404.html SPA fallback 적용
    (github pages spa 404 키워드로 서치 후 적용)