📌 useParams() 를 사용하면 전달받아 들어오는 path variable 들을 모아서 객체 로 가져다준다
1. 현재 저는 PostList에 onClickItem이라는 이름으로
(item) => {
navigate(`/post/${item.id}`)
}이러한 콜백 함수를 넘겨준거임 이 콜백함수에서는 item이라는 인수를 받게 설정해놨음
2. 여기서 헷갈리면 안됨
이제 PostList라는 컴포넌트에 들어왔는데 아까 1번에서 onClickItem이라는 이름으로 콜백함수를 보내줬었음.
흰색 동그라미 : PostListItem에 다시 넘겨줄 이름이라고 생각
초록색 동그라미 : 1번에서 받아온 onClickItem에다가 인수로 item을 넣어준거임.
결론적으로 PostListItem에 onClickItem 이라는 이름으로 1번에서 받아온 onClickItem에 인수 item을 넣어서 다시 보내준거임.. 이름똑같게 해놔서 죄송.. 이름이 똑같아서 헷갈릴듯
3. 그럼이제 마지막으로 PostListItem에 onClickItem를 넘겨줬으니까 저는 최상위 태그가 li임 그래서 그냥 이 아이템을 눌렀을때 내가 넘겨준 onClickItem이 실행되게끔 설정해준거임
==================================================================
여기까지는 id값을 넘겨준거임 그냥 이제 여기까지는 상태가
각 아이템들을 눌렀을때 navigate로 인해서 post/1 , post/2 이런식으로 이동만 하는거 뿐임
=> 1번 2번 이런거는 그럼 아이템 클릭할때마다 유동적으로 바뀌는데! 그거를 Routing에서 어떻게 처리할꺼냐?
=> App.jsx에서 라우팅 설정을 해주니까
path='post/:postId' 이러한 경로로 이동을 할때 element = {<PostViewPage />} 로 이동할꺼임
=> 여기서 :postId 는 post/1 , post/2 이것처럼 뒤에 숫자를 의미함 1, 2 이런식으로
=> 그럼이제 PostViewPage가서 또 처리를 해줘야됨
📌 useParams() 를 사용하면 전달받아 들어오는 path variable 들을 모아서 객체 로 가져다준다
위에있는 :postId 이런것들이 path variable 들임
useParams()를 사용하게되면 객체 로 들어온다고했으니까
만약에 1번 아이템을 클릭해서 post/1 번으로 이동을 하게된다면
{postId : 1} 이런식으로 객체로 들어오는거임 이걸 구조분해할당으로 받기위해서
const {postId} = useParams()
