동적 라우팅

url을 동적으로 사용하여 많은 페이지를 효율적으로 처리할 수 있다
동적 라우팅을 처리하는 방법은 path parameter와 query parameter가 있다

Path parameter

url에서 /:변수명을 사용해서, url을 parameter화 해서 관리하는 방식의 동적 라우팅
useParams hook을 통해 반환되는 객체에서, parameter를 관리할 수 있다

/:변수명에 들어가는 값은, useParams hook에서 저장/호출할 수 있다

예시: 
https://www.kurly.com/goods/5094859
일반적으로 카테코리와 숫자로 구분되는 형식을 가진다

코드 예시:
<Route path='/url/:파라미터명' element={<컴포넌트명 />} />

⚠️ 이해가 안되서 다시 정리
<Route path="/detail/:id" element={<ProductDetail />} />
프론트 라우터에서 위와 같이 url에 :id를 넣게 되는 순간, 무한한 url을 생성한 것과 같다
useParams훅으로 id값을 불러올 수 있으므로, 불러온 id값을 활용하여 서버에 해당 데이터를 요청한다

query parameter

useLocation()을 사용하여 query를 가져오는 방식의 동적 라우팅

예시:
https://mfh8p.csb.app/account?name=netflix
url부분과 데이터 부분이 ?로 구분되며, 키와 값의 형태를 가진다

query parameter의 특징:

?: 쿼리스트링의 시작을 알린다
limit: 한 페이지에 보여줄 데이터 수
offset: 데이터가 시작하는 위치(index)
key=value의 형태를 가진다
파라미터가 여러 개일 경우 &로 연결한다

---

라우터 관련 Hooks

Route 컴포넌트의 component 프로퍼티에 직접 연결되어 있는 하위 컴포넌트는,
라우터와 관련된 3가지 훅(useNavigate, useLocation, useParams)을 제공 받는다

useParams

param은 parameter의 약자이다

리액트에서 라우터 사용 시,
url의 parameter의 정보를 가져와 저장/호출할 수 있다
parameter는 url에서 /:변수명으로 관리되는 변수이다

const params = useParams();
console.log(params.id)

useLocation

현재 페이지의 url에서 Pathname을 가져오고 싶을 때 사용한다

const location = useLocation();

console.log(location) 
// 현재 url에 대한 정보를 가진 location객체를 출력한다
// pathname, search, hash, state등의 정보를 담고 있다

search는 url에서 ?로 시작되는 데이터 저장 영역을 의미한다

useNavigate

(a태그, Link태그, useNavigate() 비교 링크:
https://velog.io/@yopi27/JUSTCODE-Week3React)

---

페이지네이션

페이지를 보여주는 방식을 말한다
(페이지 방식, 무한 스크롤 방식 등..)

---

KodaKata

22.10.27

function topK(nums, k) {
  let obj = {};

  for (let i = 0; i < nums.length; i++) {
    let temp = nums[i];
    if (!obj[temp]) {
      obj[temp] = 1;
    } else {
      obj[temp] = Number(obj[temp]) + 1;
    }
  }

  const arr = [];
  Object.values(obj).map((elem) => {
    if (!arr.includes(elem)) arr.push(elem);
  });

  const keys = Object.keys(obj);
  const values = Object.values(obj);
  const answer = [];

  arr
    .sort((a, b) => b - a)
    .slice(0, k)
    .map((elem) => {
      for (let i = 0; i < values.length; i++) {
        if (elem === values[i]) answer.push(keys[i]);
      }
    });

  return answer;
}

console.log(topK([1, 5, 2, 2, 2, 2, 3, 4, 4, 5, 6, 4], 3));

배운 점:
//⚠️ Object.keys(obj)는 동적으로 추가된 프로퍼티를 인식하지 못하는 것 같다고 생각했는데
//⚠️ 그게 아니라 Object.keys(obj)를 변수로 등록한 뒤에 프로퍼티를 추가하니까 
//⚠️ 추가된 값이 반영되지 않았던 것이었다

// Object.keys(obj)와 고차함수를 사용하여 특정 value에 해당하는 key를 찾을 수 있다

// Object.keys(obj): obj의 키 배열 반환
// Object.values(obj): obj의 값 배열 반환
// Object.entries(obj): obj의 키와 값으로 이루어진 배열 요소를 가진 배열을 반환