[Vanilla JS]페이지를 이동할때 데이터 가져오는 방법

이전까지는 react 나 Springboot , node(express) 를 사용했기 때문에 

바닐라로 어떻게 페이지 이동을 시키며 , 그때 데이터를 어떻게 이동시킬지 몰랐었다

사실 알고는 있지만 그거 바닐라에서도 되는거야 ,,? 하는 의문점이 있었기 때문에 이것저것 시도했다

export { movieData };

넘겨줄 데이터가 있는 함수를 export에 담아주고 

 

import { movieData } from "./movieAPI.js";

받아줄 페이지 상단에 이거 작성해준다

-> 사실 여기까지는 다들 알고 있겠죠 ?

 

  function handleClickCard({ target }) {
    if (target === cardList) return;

    if (target.matches(".movieCard")) {
      // 페이지 이동
      let queryString = `?id=${target.dataset.id}`;
      location.href = "./sub.html" + queryString;
    } else {
      alert(`id : ${target.parentNode.dataset.id}`);
    }

이렇게 카드를 클릭했을때 새로운 페이지로 이동시켜줄 기능을 가진 함수를 만들고

url 속에 데이터를 넘겨준다

필자와 같은 경우에는 target으로 버튼을 감지한 후 queryString 이라는 객체에 id값을 넣어준 후 

그걸 이동할 url 속에 ? 뒤로 넣어주었다

else 뒤는 무시해도 된다. 기능구현해야할 부분이었음으로 !

 const urlParams = new URL(location.href).searchParams;
  const id = Number(urlParams.get("id"));

넘겨진 페이지에서는 url 뒤로 붙은 id값을 가져온다

이때 !!!

기존 데이터의 id type은 number 지만

url속 id는 string이기 때문에 Number() 를 사용해 type을 맞춰준다

 

이렇게 id 속에 값이 담겨지게 된다 !!

기존에 알고 있던 여러방식으로 테스트해보면서 이 방식을 찾았으니 머리에 각인은 확실히 남았지만

소요시간이 너무 길어졌다 

기존에 알고 있던 지식과 섞여서 더 그랬던것 같다 ㅠㅠ