React Router 를 활용한 동물정보 사이트 만들기

 

React 라우터 함수및 사용법 참조

https://yongar2002.tistory.com/67

React Router

 

 

 

1. 받아올 데이터 확인

  객체 내에 id, name, img, descroptiogn 속성이 있다.

[
    {
        id:0,
        name:'고양이',
        img: images.cat,
        description: '나만 고양이 없어..'
    },
                  .
                  .
                  .
}

 

 

2. React Router 설치

npm i react-router-dom

 

 

3. React Router 를 사용 하기 위해 App 컴포넌트를  BrowseRouter 로 감싼다.

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

<BrowserRouter>
    <App />
 </BrowserRouter>

 

 

4. App 컴포넌트로 가서 라우팅할 주소와 컴포넌트를 배치

   컴포넌트별로 Route 태그로 신규 생성한다.

 

      Path 속성 : 컴포넌트를 보여줄 주소

      element 속성 : 배치할 컴포넌트를 넣는다

import { Route, Routes } from "react-router-dom";

<Routes>
        <Route path="/" element={<Main />}></Route>
        <Route path="/detail" element={<Deatil />}></Route>
        <Route path="/search" element={<Search />}></Route>
</Routes>

 

Main : 메인 페이지로 동물의 전체 목록을 보여주는 페이지로 만들예정

Deatil : 메인페이지에서 동물을 클릭하면 동물의상세정보를 보여주는 페이지

Search : 검색어를 입력 하면 검색한 동물을 보여주는 페이지

 

 

 

 

5. Main 컴포넌트 렌터링

  먼저 동물의 전체 목록을 보여줄 메인 페이지를 보여줄 Main 컴포넌트로 간다. 

  받은 데이터 값을 map 매서드를 이용해서 아이템별로 값을 전달해서 화면에 렌더링 해준다.

import { Link} from "react-router-dom";
import { data } from "../assets/data/data";

function Main() {
  
  return (
    <ul>
      {data.map((el) => (
        <li key={el.id}>                  // react 는 고유의 key 값이 있어야 한다.
          <Link to={`detail/${el.id}`}>   // 클릭한 값의 id 주소로 넘어간다 ex) deatil / 1
            <img src={el.img}></img>      // 동물 이미지
            <div>{el.name}</div>          // 동물 이름
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default Main;

 

 

이렇게 각 아이템별로 메인 페이지에 렌더링 된다.

 

 

6. Route 에서 id 주소값 넘겨주기

    다음은 고양이 , 소 등 아이템을 눌렀을때의 상세 페이지를 만들 예정이다.

    Main 컴포넌트에 Link 라는 태그가 있어서 Detail/id 라는 페이지로 이동하는데 여기의 id 의 값을 받아오고 싶을때 

    쓰는 속성으로 React Router 에서는 useParams 라는 함수가 있다.

 

그전에 App 컴포넌트로 받아올 주소 뒤에 / :변수명으로  /:id 라고 작성을 하면 id 로 get 을 해서 값을 받아 올 수 있다.

<Route path="/detail/:id" element={<Deatil />}></Route>

 

 

detail 컴포넌트로 가서 

params 에 useParams 를 받아오고 받아온 id 값과 data 의 id 값이 같은 것은 가져와서 화면에 나타내 준다. 

import { useParams } from "react-router-dom";
import { data } from "../assets/data/data";

function Deatil() {
  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 Deatil;

 

카드를 클릭하면 주소가 바뀌면서 아래그림과 같이 detail 내용이 렌더링 된다.

 

 

7. 검색 기능 

 

  검색을 입력할 버튼과 input 창 생성을 하고 input 에 값을 입력 하고 받아오기 위해 상태를 만든다.

  input 창에 검색어를 입력 하고 버튼을 누르면 

 

  /search?animal=검색어

 

  로 페이지가 이동하게 되며 검색어 값을 search 컴포넌트에서 받아오기 위해 useSearchParams를 사용할 예정이다.

const [inputValue, setInputValue] = useState("");

 

<input
   value={inputValue}
   onChange={(e) => setInputValue(e.target.value)}
 />
<button onClick={() => navigate(`/search?animal=${inputValue}`)}>
  검색
</button>

 

 

 

search 컴포넌트로 가서 useSearchParams 를 사용해 검색어를 받아오고

 

자음만 작성해도 검색 할수 있는 라이브러리를 적용하였다. https://www.npmjs.com/package/korean-regexp 

korean-regexp

 

검색어와 일치하는 동물목록을 Filter 메소드를 활용하여 적용하였다. 

import { Link, useSearchParams } from "react-router-dom";
import { data } from "../assets/data/data";
import { getRegExp } from "korean-regexp";

function Search() {
  const [searchParms] = useSearchParams();
  const params = searchParms.get("animal");
  const reg = getRegExp(params);

  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}></img>
            <div>{el.name}</div>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default Search;