쇼핑몰 사이트를 보면 상세페이지 안에 리스트 페이지로 넘어갈 수 있는 작은 Navigation Bar가 존재한다.

1. Home을 누르면 main 페이지로 이동
2. 모니터를 누르면 모니터 카테고리에 분류되어 있는 제품 리스트 페이지로 이동
3. 일반을 누르면 일반 모니터 제품 리스트로 이동

Navigate 컴포넌트 만들기

Navigate.js라는 파일로 따로 이 부분만 컴포넌트화 시켜 작업했다.

컴포넌트 이름만 보면 아 이곳은 서브메뉴 부분이구나 알아볼 수 있어 가독성을 높여주기 위함이다!

Link 컴포넌트 이용하기

import React from 'react';
import { Link } from 'react-router-dom';
import './Navigate.scss';

Link 컴포넌트를 사용한 이유

a링크가 아닌 Link 컴포넌트를 사용한 이유는 SPA방식으로 화면을 랜러딩하는 리액트의 특성 때문이다. Link 컴포넌트로 페이지를 이동한다면 필요한 부분만 렌더링 되고 나머지 그대로 유지되기 때문에 a링크보다 속도가 빠르다.

🔴 단, 페이지 내 이동이 아닌 외부 링크로 이동할 때는 a링크를 사용하는 것이 맞다!

라우팅

1. 정적라우팅

• Router 컴포넌트에서 미리 프로젝트에서 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의해두는 방식
• URL의 전체 형태를 미리 정의한다

2. 동적라우팅

• 특정 규칙을 정의한 후 규칙에 부합하는 URL의 경우에는 해당 element를 보여주게 설정하는 방식

2-1. Path Parameter

• URL에 있는 값을 마치 매개변수(parameter)처럼 사용
• useParams hook 사용

2-2. Query String

• URL의 한 부분으로 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용한다.
• key=value 형태의 문자열로 표현한다.
• useLocation 또는 useSearchParams hook 사용

표현 방법

<Link to="/list?sort=popular" />

props로 받아온 데이터 활용하기

링크 주소를 서버로 부터 받아온 데이터를 활용하여 쿼리스트링을 완성해야 한다.

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

1. `` 백틱 안에 ${props.data} 를 넣어주고
2. 전체적응로 {}중괄호를 묶어주어야 한다!

마무리하면서

리액트로 페이지를 이동하려면 생각보다 여러가지 개념에 대해 알고 있어야 했다. a링크 대신 Link 컴포넌트를 사용하는 이유는 무엇인지, 정적/동적 라우팅 개념과 사람들은 왜 path parameter 대신 QueryString를 쓰는지 또한 이것을 어떻게 활용하면서 쓰는지 등 말이다. 쿼리스크링을 useSearchParams 훅을 이용하여 좀더 활용하는 방식에 대해 공부해보면 좋을 거 같다.