👾 구현 기능
- Main 페이지에서 동물 전체 목록 표시
- Detail 페이지에서 특정 동물에 대한 상세 정보 표시
- Search 페이지로 이동할 수 있는 검색 input 과 button 생성
- Search 페이지에서 검색한 동물에 대한 목록 표시
기초 설정 ( react, react-router )
📍 [react-router] 를 사용하기 위하여 npm i react-router-dom 으로 설치
📍 <BrowserRouter>를 사용하여 라우팅 설정 후 App.jsx 파일 감싸주기
📁 main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root")).render(
<BrowserRouter>
<App />
</BrowserRouter>
);[Main] 페이지에서 동물 전체 목록 표시
📍 모든 동물 목록을 사진과 이름으로 표시하고, 해당 동물을 클릭하면 상세 페이지로 이동
📁 Main.jsx
import { Link } from "react-router-dom";
import { data } from "../assets/data/data";
function Main () {
return (
<>
<ul>
{data.map((el) => (<li key={el.id}>
<Link to={`/detail/${el.id}`}>
<img src={el.img}></img>
<div>{el.name}</div>
</Link>
</li>))}
</ul>
</>)
}
export default Main;🔮 <Link>
<Link> 컴포넌트와 to 속성을 사용해서 이동하고 싶은 주소로 이동할 수 있다
이때 <Link> 컴포넌트는 <a> 요소로 표시되지만 새로고침은 발생하지 않고 주소만 변경된다 !
* HTML 에서 <a> 안에 있는 주소 클릭하면 새로고침 발생
[Detail] 페이지에서 동물 상세 정보 표시
📍 Main.jsx 에서 특정 동물 클릭시 동물 사진, 이름, 설명이 있는 해당 동물 상세 정보 페이지로 이동
📁 Detail.jsx
import { useParams } from "react-router-dom";
import { data } from "../assets/data/data";
function Detail () {
const params = useParams()
const animalData = data.find( (el) => el.id === Number(params.id))
return(
<>
<section className="detail">
<img src={animalData.img}/>
<h2>{animalData.name}</h2>
<div>{animalData.description}</div>
</section>
</>
)
}
export default Detail; 🔮 find()
filter() 를 사용하면, 조건을 만족하는 모든 요소를 배열로 반환하기 때문에
find() 를 사용하여 조건을 만족하는 첫 번째 요소만 반환한다. [단일 객체(Object) 또는 undefined / 하나의 요소만 찾을 때]
[Search] 페이지에서 검색 결과 표시
📍 Main.jsx 에 있는 검색 input 에서 검색 결과 입력 시 결과 표시
📁 Search.jsx
import { useSearchParams } from "react-router-dom";
import { data } from "../assets/data/data";
import { getRegExp } from "korean-regexp";
import { Link } from "react-router-dom";
function Search () {
const [searchParams] = useSearchParams()
const param = searchParams.get('animal')
const reg = getRegExp(param)
const regData = data.filter( (el) => el.name.match(reg))
return (
<>
<ul>
{regData.map((el) => (<li key={el.id}>
<Link to={`/detail/${el.id}`}>
<img src={el.img}></img>
<div>{el.name}</div>
</Link>
</li>))}
</ul>
</>
)
}
export default Search;🔮 Korean-regexp
: 한글 처리와 관련된 정규 표현식(Regular Expression) 기능을 제공하는 라이브러리입니다.
주로 JavaScript에서 한글 검색, 변환, 자동 완성 기능을 구현할 때 사용됩니다.
1️⃣ 설치
터미널에 입력 ...
npm i korean-regexp
2️⃣ 기능
● 자음, 모음만 입력해도 한글 검색 가능
‣ 예: "ㅎㄱ"으로 "한국" 검색 가능
● 초성 검색 기능 지원
‣ 예: "ㅂㅅ" → "부산", "박수", "배수" 등 검색 가능
● 한글 정규식 변환 기능 제공
‣ 한글을 **정규 표현식(Regex)**으로 변환하여 검색 가능
3️⃣ 라우팅 설정 및 사용
import { getRegExp } from "korean-regexp";
function Search () {
const [searchParams] = useSearchParams()
const param = searchParams.get('animal')
const reg = getRegExp(param)
‣ animal 쿼리 스트링을 받아서 getRegExp를 적용.
App.jsx 전체 라우팅 설정
import { useState } from "react";
import "./App.css";
import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
import Main from "./page/Main";
import Detail from "./page/Detail";
import Search from "./page/Search";
function App() {
const [inputValue, setInputValue] = useState('')
const navigate = useNavigate()
return (
<>
<header>
<h1>🦮 동물 정보 사이트 🐈</h1>
<div className="inputSearch">
<input value={inputValue} onChange={(e) => setInputValue(e.target.value)}/>
<button onClick={()=> navigate(`/search?animal=${inputValue}`)}> 🔍 </button>
</div>
</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_FE_09_박하늘</footer>
</>
);
}
export default App;
🔮 <Routes> 와 <Route>를 이용하여 루트 설정
• <Routes> 컴포넌트는 <Route> 컴포넌트들을 묶어주는 역할
• <Route> 컴포넌트는 특정 주소에서 어떤 컴포넌트를 보여줄지 정해주는 역할
• <Route> 컴포넌트 - path 속성에는 URL 경로를, element 속성에는 해당 경로에서 렌더링할 컴포넌트를 지정피드백
CSS 및 반응형 웹 수정
