[동적라우팅]다중필터 처리하기 (1편:라우팅개념)

1. 라우팅 개념정리하고가실게요~

1-1.라우팅이란

• url주소를 기준으로 다른 view를 보여주는 것

1-2. SPA에서의 라우팅이란

• 화면을 이동하여 새로고침하지 않고, 동적으로 화면(뷰)를 그려주는 기술
  -react에서는 recat-router-dom을 활용하여 SPA라우팅을 구현

1-3.정적라우팅과 동적라우팅

1)정적라우팅 : /, /users , /products와 같이 정해진 경우에 대해서만 경로를 표현

2)동적라우팅 : url마지막에 특정 id값이 들어감. id값에 따라 무수히 많은 url이 생성됨 ex)/products/1043 1043번째로 등록된 제품 상세페이지

2. 동적 라우팅 처리방법 2가지

우리가 구현하고자하는 것은, SIZE, 제품Type(상의, 하의, 악세서리), 캐릭터(브랜드) 각각의 속성을 다중으로 처리하는 것이다.

1)Path Parameter

해당기능은 useNavigate & useLocation 훅을 사용하여 상품리스트페이지에서 상세페이지로 보내는 기능을 구현하는데에 활용하기로 했다.

user/:id => <users /> // useParams().id

[부모컴포넌트]

return (
    <BrowserRouter>
      <div>
        <h2>Accounts</h2>
        <ul>
          <li>
            <Link to="/Boy">소년용품</Link>
          </li>
          <li>
            <Link to="/Girls">소녀용품</Link>
          </li>
          <li>
            <Link to="/Toys">장난감</Link>
          </li>
        </ul>

        <Routes>
          <Route path="/:id" element={<Child />} /> <-자녀컴포넌트를 element로 삼고 그 path 뒷부분에 id를 넣어주겠다.
        </Routes>
      </div>
    </BrowserRouter>
  );

[자식컴포넌트]

  const { id } = useParams();   <-useParams()로 부모에서 준 id를 받아오겠어요. 

  return (
    <div>
      <h3>ID: {id}</h3>   <--{id}를 쓰겠어요
    </div>
  );
}

2)Query Parameter

/search?keyword=something : <Search /> // useLocation().search

[조부모(?)컴포넌트]

export default function QueryParamsExample() {
  return (
    <Router>
      <QueryParamsDemo />  <-쿼리파라미터라는 하위컴포넌트 따로갈게요~
    </Router>
  );
}

[부모컴포넌트]

return (
    <div>
      <div>
        <h2>Accounts</h2>
        <ul>
          <li>
            <Link to="/account?name=top">상의</Link>
          </li>
          <li>
            <Link to="/account?name=bottom">하의</Link>
          </li>
          <li>
            <Link to="/account?name=acc">악세서리</Link>
          </li>
        </ul>

        <Child name={query.get("name")} />    <=쿼리의 name항목을 가져다가 자식컴포넌트의 name으로 보내준다.
      </div>
    </div>
  );
}

[자식컴포넌트]

return (
    <div>
      {name ? (   <-중괄호치고 로직들어갑니다~. 부모에서 받은 name에 따라 아래 코드로 렌더링을 가겠다 이겁니다.
        <h3>
          The name in the query string is &quot;{name}
          &quot;    <---쫄지마요 &quot;는 단지 쌍따옴표(")일뿐...쌍따옴표사이에 부모에서 받은 name값을 넣어주겠다라는 것...
        </h3>
      ) : (
        <h3>There is no name in the query string</h3>
      )}
    </div>
  );

그렇다면 다중필터를 위해서는 어떤 동적라우팅 기능을 선택해야할까..
다음 편에서 계속됩디다..