React / Router 실습 - 동물 정보 사이트 만들기

기능 목록

• 메인 페이지에서 동물 목록 화면에 표시하기
• 동물 상세 정보 페이지 만들기
• 동물 이름으로 검색 기능 & 검색 결과 페이지 만들기

 

컴포넌트 구성

main.jsx
⎿  app.jsx
    ⎿  Main.jsx
    ⎿  Detail.jsx
    ⎿  Search.jsx

 

 

 

---

 

 

1. 동물 목록을 화면에 표시하기

main.jsx

React Router를 앱 전체적으로 사용하기 위해서 App 컴포넌트를 BrowserRouter 컴포넌트로 감싸고 있다.

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

 

 

App.jsx

각각의 Route에서는 각 페이지의 컴포넌트를 요소로 불러와 분기별로 화면에 표시하도록 하고,

Routes는 이 Route들을 묶어주고 있다.

 

이때 Detail 컴포넌트에서는 상세 페이지로 이동해야 하는데, 각 페이지에서 해당 정보를 불러올 고유한 id값이 있어야 한다.

상세 페이지에서 불러올 데이터들은 모두 고유한 id값을 가지고 있으며 데이터들은 data.js 파일 내에 담겨있는데, data.js는 다음과 같은 구조로 이루어져 있다.

data.js에는 아래와 같이 키:값의 쌍들로 이루어진 객체의 배열로 이루어져 있다. (아래 코드는 배열의 요소 중 하나이다.)

이때 images는 images의 정보를 담고 있는 임포트된 파일의 변수다.

{
    id:8,
    name:'판다',
    img: images.panda,
    description: '판다는 유전학적으로 육식동물에 가깝다.'
},

 

경로 파라미터(Path Parameter)란 URL의 경로 일부로 값을 전달하는 방식이다.

이를 사용해 URL에서 id 값을 변수처럼 전달할 수 있으며, id의 값을 기반으로 상세 페이지를 만들 수 있다.

 

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

 

 

Main.jsx

data의 각 값을 리스트로 배열할 것이기 때문에 map으로 값들을 각각 <li> 요소에 담아 반환해주고 있다.

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

 

data의 각 요소가 el이라는 매개변수에 들어와서 map 함수로 반환되고 있다.

key 속성은 el.id값으로 부여했고, 항목의 이미지와 이름도 el.img, el.name으로 받아오고 있다.

 

해당 li태그를 누르면 그 상세 페이지로 이동하고 싶기 때문에 Link 컴포넌트로 감싸주고 있는데,

Link의 to 속성은 /detail/:id'로 :id를 경로 변수로 받아와 고유한 id값을 가진 페이지로 이동하게 하고 있다.

 

 

지금까지의 렌더링되는 화면

 

---

 

 

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

Detail.jsx

Main.jsx에서 동물 카드를 클릭했을 때, Link 컴포넌트로 이동하면서 el.id를 경로 파라미터로 넘기고 있는데, 이를 UseParams()을 사용해 얻어올 수 있다.

useParams()은 URL 경로에 포함된 파라미터를 가져오는 라우터의 Hook 중 하나로,

위의 App.jsx에서 Route 컴포넌트에서 동일한 형식()으로 지정해놨기 때문에, 문제없이 파라미터 값을 가져올 수 있다. 

 

예를 들어 id가 3번인 카드를 클릭했을 때, const params = useParams();으로 경로의 파라미터를 params라는 변수에 담고 이를 출력하면 이렇게 출력된다.

 

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

 

파라미터도 가져왔고 이제 이 아이디에 해당하는 데이터를 가져오기 위해서 find()를 사용해 해당 id값과 일치하는 정보를 변수 animalData에 저장한다.
find() : 첫번째로 조건에 맞는 단일 요소를 반환한다. (없을 경우 undefined를 반환한다.)

이때 useParams()은 모든 값을 string타입으로 반환하기 때문에 그냥 el.id === params.id를 할 경우 undefined가 나온다. 그래서 Number()로 params.id를 숫자 타입으로 변환해 줘서 비교하면 정상적으로 id가 일치하는 데이터를 가져올 수 있다.

 

 

상세 페이지 화면, 주소는 http://localhost:5173/detail/8

 

 

 

---

 

 

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

App.jsx

이번 경우에는 위의 경로 파라미터와는 달리 쿼리 스트링의 정보로 페이지를 이동해 특정 데이터를 얻을 수 있다.

 

쿼리 스트링은 URL의 끝에 ?key=value 형태로 붙는 추가 정보로, 데이터가 여러 쌍일 경우 &로 연결하고 있다.

주로 검색 조건, 필터 등을 전달할 때 사용하는데 이 경우에는 검색 조건을 전달하고 있다.

 

function App() {
  const [inputValue, setInputValue] = useState('');
  const navigate = useNavigate();
  return (
    <>
      <header>
        <h1>💚 동물 조아 💚</h1>
        <input
          value={inputValue}
          onChange={(e) => setInputValue(e.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>
    </>
  );
}

 

검색 조건을 가진 URL로 이동하기 위해서 먼저 useNavigate()로 페이지 이동을 위한 함수 navigate를 생성한다.

input에는 검색어를 입력받고, 입력받은 검색어는 버튼을 누르면 navigate 함수로 안에 지정된 경로로 이동된다.

 

쿼리 스트링의 경우에는 경로 파라미터와 달리 Route 컴포넌트에 쿼리 파라미터를 지정할 필요가 없다.

 

경로 파라미터는 말그대로 경로 안에 포함된 변수고, 이 안에 정보가 포함되어 있어서 라우터가 직접 해석하는 거라면

쿼리 스트링은 경로에 쿼리 스트링이 붙여진 것이기 때문에 라우터는 쿼리 스트링을 무시하고 Search 컴포넌트만 보여준다.

 

항목	경로 파라미터	쿼리 스트링
라우터가 해석	O	X (URL의 일부로 무시됨)
사용 이유	고유한 데이터 식별	조건 전달 (검색, 필터, 정렬 등)
형식	/경로/파라미터값	/경로?키=값
컴포넌트와의 매칭 여부	/경로/파라미터이름 과 일치해야함	/경로 만 일치하면 됨
접근 방식	useParams().파라미터이름	useSearchParams().get('키')

 

 

Search.jsx

검색할 때 문자열의 패턴을 확인하기 위해 정규식을 사용하면 좋은데, 한글로 검색할 때 korean-regexp 라이브러리를 사용할 수 있다.

korean-regexp는 한국어 정규식을 사용할 수 있게 하는 라이브러리다.

한글을 기준으로 만든 것이라 초성/중성/종성을 구분하기 때문에 초성이나 모음만 있어도 검색을 할 수 있도록 도와줄 수 있다.

 

npm i korean-regexp

 

 

navigate()로 넘어간 쿼리 스트링의 값을 useSearchParams()로 읽어왔다.

이때 useSearchParams()은 [객체, 객체 업데이트 함수]로 생성할 수 있는데 이번 실습에서는 검색어로 값이 변경되는 방식이기 때문에 객체만 가져와서 생성했다.

쿼리 스트링의 키인 animal의 값(검색어)을 param이라는 변수에 담았고, reg 변수는 param을 초성에도 매치될 수 있도록 만들어진 정규식 객체를 담고 있다.

 

마지막으로 필터링된 데이터를 data에 filter 메서드로 필터링해 조건에 맞는 값만 가져온다.

이 때 match()는 문자열이 정규식과 일치하면, 일치하는 문자열을 퐇마하는 array를 반환하는 메서드다.

 

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

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

export default Search;

 

 

한글 정규식을 사용해서 초성만 작성해도 ㅍ를 가지고 있는 판다, 펭귄이 표시되고 있다.

 

 

+ ㅍㄷ로 검색했을 때 판다가 나오지 않는 경우

ㅍ로 검색하면 판다랑 펭귄이 잘 나오는데, 이는 'ㅍ'이 단어의 초성으로 있을 때의 모든 경우를 포함해주고 있기 때문에 ㅍ로 시작하는 단어는 다 포함해주고 있다.

그런데 ㅍㄷ로 검색할 경우 'ㅍㄷ'를 초성을 나열한 문자열로 간주할 수도 있기 때문에, 초성 검색 기능 옵션을 추가해줘야된다.

 

방법은 간단한데, reg를 선언할 때 { initialSearch:true}를 추가해주면 된다

  const reg = getRegExp(param, { initialSearch: true });