React - navigate로 props전달방법

결론 부터 말씀드리자면 아래와 같이 클릭을 할때 navigate로 

navigtae('주소', { state : 보내고자하는 데이터} )를  사용하면 데이터를 전달할 수 있습니다. 

받는 컴포넌트에서는 useLocation을 import하고 아래와 같이 사용하면 콘솔에서 출력이 됩니다. 

 

 

 

---

해당 기능이 필요했던 이유

현재 만들고 있는 페이지에서 카테고리의 항목을 클릭하면 해당카테고리 항목의 페이지로 이동하여

그에 맞는 데이터값들을 보여줘야 했습니다. 

 

서버에서 카테고리에 맞는 데이터를 불러오려면 아래와 같은 형식이 필요했습니다. 그래서 저는 맨뒤에 ' 보드게임 ' 이라는 값 즉, 카테고리 명이 필요했습니다. 

처음에 2개의 api를 호출해야하는 줄 알았습니다. 즉,

• 모든 상품의 데이터 api -> post
• 카테고리 api  -> category 

를 호출해서 category api를 통해 받아온 데이터값에서 카테고리명을 저장해 위의 '보드게임' 저부분에 방금 저장한 데이터를 넣어주려 했습니다. 

근데 2개의 api를 useEffect에서 호출하다보니 category를 먼저 호출하고 post를 호출해야하는데 생각했던거와는 달리 쉽지않았습니다. await async를 이용해볼려했으나 쉽게 풀리지 않았고 다른 방법을 생각하다가

 

' 어차피 메인화면에서 카테고리 api를 미리 호출하니까 카테고리를 클릭할때 카테고리명을 넘겨 주면되지않을까? '라는 생각을 하게 되었고 해당 기능을 찾던중 navigate로 데이터를 넘겨주는 방법을 알게되어 문제없이 해결했습니다.