[React] 동적 라우팅

1-1. Router - Route(경로)를 찾아가는 행위

즉 라우팅이란, 다른 경로(url주소)에 따라 다른 View(화면)을 보여주는 것

 

1-2. SPA (싱글 페이지 앱, 단일 페이지임)

-> 사용자가 다른 뷰로 이동할 때 앱은 뷰를 동적으로 다시 그림

--->SPA는 MPA(페이지간 이동)보다 빠름

 

2. 정적 / 동적 라우팅 

-> path에 1대 1로 경로를 지정해놓은 것 -> 정적 라우팅

->상품 번호별로 url 막 여러개 구성되어있는게 동적 라이팅임!!!! -> 아이디 값을 가져와서 parameter로 지정해놓고 무수한 url을 만듬 !

->>>path parameter, query parameter 를 통해 만들 수 있다

 

쓰는 법 !!

 

2-1. path parameter

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Routes>
          <Route path="/:id" element={<Child />} />
        </Routes>

 

2-2. query parameter

        <ul>
          <li>
            <Link to="/account?name=netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/account?name=zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/account?name=yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/account?name=modus-create">Modus Create</Link>
          </li>
        </ul>

        <Child name={query.get("name")} />

이렇게 하고 각 링크에 `link/${id(맵 돌려서 들어가는 각 아이디 값}` 을 넣어주면 된다 !!