뭐 만들면서 리액트 기초 다지기

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

• React Router를 사용한 페이지 별 라우팅 과정
(BrouserRouter, Routes, Route, Link 역할)

• BrouserRouter : React Router를 쓰고 싶은 곳을 감싼다.

  <BrouserRouter>
  <App />
  </BrouserRouter>

• Link : 이동하고 싶은 주소로 "to"를 사용해서 이동한다.

  <Link to= {경로}>
  	<링크 걸 요소>
  <Link />

• Routes : Route를 묶어둔다

• Route : 특정 주소에서 보여줄 컴포넌트를 정한다

   <Routes>
        <Route path='/' element={<Main/>}></Route>
        <Route path='/detail/:id' element={<Detail/>}></Route>
        <Route path='/search' element={<Search/>}></Route>
   </Routes>
      

• data.js 파일 내 데이터를 메인 페이지에 렌더링하는 방법
• 동물 카드 클릭 시 상세 페이지로 경로 이동 설정
(동물 id 값에 따른 경로 설정 방법)

data를 map을 사용해 돈다.

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

이렇게 생긴 데이터를 도는 것인데 이때 키값을 id로 설정해 이미지와 이름을 불러와준다. 키값이 있으면 그 하나의 데이터에 접근하기 좋아지는데,
Link를 사용해 하나의 데이터가 연결되는 detail페이지의 상세주소를 정해줄 수 있다.

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

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

• 상세 페이지로 이동 시 특정 id값에 대한 데이터를 받아오는 방법

useParams()는 주소의 쿼리파라미터를 가진 객체를 생성해주는 함수이다. data.find는 params의 id를 숫자형 변환한 것과 데이터의 id가 같은 것을 찾아온다.

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>
    )
}

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

• useSearchParmas를 사용하여 경로의 특정 값에 대한 데이터를 받아오는 방법
• useNavigate를 사용하여 경로를 이동하는 방법
• korean-regexp 라이브러리 개념설명
• 전체 데이터 목록에서 검색어로 필터링 된 데이터를 받아오는 방법

여기서 usesearchParams()는 주소의 쿼리스트링 값을 가져올 수 있는 객체를 생성하고 쿼리스트링을 수정해준다.

korean-regexp라는 라이브러리르 사용하는데 이 라이브러리는 한글 검색을 돕는 라이브러리다.
npm i korean-regexp를 사용하면 쓸 수 있다.

Search.jsx에서 ..

function Search() {
    const [searchParams, setSearchParams] = 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}/>
                <div>{el.name}</div>
            </Link>
            
        </li>)}
        </ul>
    )
}

App.jsx에서 ...

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