profile
역시 퍼블이 재밋당께

react router dom을 이용한 url 직접 접근

다음 글은 데이터베이스가 json일 경우를 가정하고 작성. 다른경우라도 크게 다르지 않을듯. 겪은 문제 이런 url이 있다고 쳐보자. [카테고리] -> [컴퓨터 상품 리스트] 에서 정보를 받아와 상품 상세 페이지로 진입한다. 이 경우 Link를 타고 와야 파라미터가 전달되는데, 상품 id(0001)를 직접 입력해서 상세페이지로 접근하면 전달받은 정보가 없어서 텅 빈 페이지가 나온다. 해결 우리에겐 리액트라우터가 제공하는 useParams가 있다. router 관리는 대충 이런식으로 하고있을건데 id와 item은 useParams에 저장되어있다. 여기서 id는 카테고리 번호, item은 상품의 고유번호다. 일단 갖고와준다. 그리고 우린 해당 id와 item이 일치하는 데이터를 가져와야한다. 배열에서 원하는 데이터를 찾아주는 Array.find()를 이용하자. 그리고 goods로 렌더링 하면 된다. 참고로 json의 구조는 이렇게 해놨다.

2022년 8월 26일
·
0개의 댓글
·

[...params]가 뭔지 이해된거 같아서 기록

어디서 오나 궁금했다 도대체 [...params].js의 파라미터들은 어디서 오는가 router에서 설정한 /:id/:item/:key 이녀석들이 params였다! 사용법 react-router 에서는 next 에서는

2022년 8월 26일
·
0개의 댓글
·

react-router-dom v6에서 link to props 전달하기

v5까지는 다음과 같은 방식으로 props를 전달할 수 있었다. 근데 v6로 업데이트 되면서 state는 저렇게 쓰지 않는다. 저렇게 하면 무슨짓을 해도 undefined만 찍힌다. v6는 다음과 같이 작성한다. state를 to 밖으로만 빼주면 된다! 달다 달아~

2022년 8월 16일
·
0개의 댓글
·

react-router-dom v6 router 오류 해결법

Router.js 또는 라우터로 설정해놓은 js파일에 두개중에 하나가 있는지 확인하기. BrowserRouter 또는 HashRouter가 반드시 있어야 하고 import시에 { A as B } 는 A라는 녀석을 B라는 이름으로 쓰겠다~ 라는 뜻임

2022년 6월 15일
·
0개의 댓글
·