쇼핑몰 사이트를 보면 상세페이지 안에 리스트 페이지로 넘어갈 수 있는 작은 Navigation Bar가 존재한다.
Navigate.js라는 파일로 따로 이 부분만 컴포넌트화 시켜 작업했다.
컴포넌트 이름만 보면 아 이곳은 서브메뉴 부분이구나 알아볼 수 있어 가독성을 높여주기 위함이다!
import React from 'react';
import { Link } from 'react-router-dom';
import './Navigate.scss';
a링크가 아닌 Link 컴포넌트를 사용한 이유는 SPA방식으로 화면을 랜러딩하는 리액트의 특성 때문이다. Link 컴포넌트로 페이지를 이동한다면 필요한 부분만 렌더링 되고 나머지 그대로 유지되기 때문에 a링크보다 속도가 빠르다.
🔴 단, 페이지 내 이동이 아닌 외부 링크로 이동할 때는 a링크를 사용하는 것이 맞다!
useParams
hook 사용key=value
형태의 문자열로 표현한다.useLocation
또는 useSearchParams
hook 사용<Link to="/list?sort=popular" />
링크 주소를 서버로 부터 받아온 데이터를 활용하여 쿼리스트링을 완성해야 한다.
function Navigate({ product }) {
return (
<nav className="nav">
<ul className="subMenu">
<Link to="/">
<li className="li home">Home</li>
</Link>
<li className="li">
<i className="fa-thin fa-greater-than" />
</li>
<Link to={`/category?main=${product.main_category_num}`}>
<li className="li productLists">{product.main_category}</li>
</Link>
<li className="li">
<i className="fa-thin fa-greater-than" />
</li>
<Link to={`/category?sub=${product.sub_category_num}`}>
<li className="li product">{product.sub_category}</li>
</Link>
</ul>
</nav>
);
}
리액트로 페이지를 이동하려면 생각보다 여러가지 개념에 대해 알고 있어야 했다. a링크 대신 Link 컴포넌트를 사용하는 이유는 무엇인지, 정적/동적 라우팅 개념과 사람들은 왜 path parameter 대신 QueryString를 쓰는지 또한 이것을 어떻게 활용하면서 쓰는지 등 말이다. 쿼리스크링을 useSearchParams 훅을 이용하여 좀더 활용하는 방식에 대해 공부해보면 좋을 거 같다.