useParams에 대해 질문드립니다.

[최경열]

진도

part2 - React Router3:URL파라미터로 상세페이지 100개 만들기

 

내용

우선 저는 신발 리스트에 각 이미지를 클릭시 해당 신발의 상세페이지로 넘어가게 만들었습니다.

여기서 해당신발에 상세페이지로 넘어갈때 Link를 사용하여  해당 컴포넌트에 있는 state값을 전송해서

detail 컴포넌트에 뿌려줬습니다. 그런데 이과정에서 저는 useParams를 사용하지 않았는데 그래서 그런지 몰라도

직접 url에 detail/1 또는 detail/2를 입력하면 해당화면은 보이지 않습니다. 그러나

해당신발에 상세페이지로 넘어가서는 detail/1이라고 url에 명시가 되어있더라구요. 그래서 이게 맞는건가 싶습니다.

좀더 자세히 질문점을 정리하면

1. useParams는 정확히 무슨기능인가요?

    1-1: useParams는 /:id에만 반응하나요? /:abc 나 혹은 /id 에도 반응하나요?

    1-2: detail/:id 에서 /다음에 어떤 문장을 쓰든 그 문장을 let { string } = useParams(); 이런식으로 작성하여 단순히 특정 컴포넌트에서 해당 url주소에 입력값을 변수로 사용하기 위한건가요?

(ex url에 detail/helloWorld 사용 -> let {id} = useParams() -> <div>{id}</div>를 써서 단순히 입력한 값 helloWorld만 불러온다?)

2. 제 코드의 문제점(틀린점)을 알고싶습니다.

 2-1: 저는 useParams가 1-2에 이유라면 필요없다고 생각하고 사용하지 않고, 각각의 신발에 이미지를 클릭하면 그 해당 신발에 각각에 상세페이지를 띄우는 방식을 Link로 해당신발에 props값을 넘겨줘서 띄워졌는데 문제는 문제없이 작동하나, 직접 url에 detail/1이라고 작성하면 그 페이지는 나오지 않습니다.

2-2 저 처럼 이렇게 컴포넌트를 구조화한것도 맞을까요?

[codingapple]

useParams는 /:url파라미터 자리에 유저가 적은 문자 가져오고 싶을 때 쓰면 됩니다 :파라미터 작명은 자유입니다

props로 지금 누른 상품번호 보내도 상관없습니다

라우트로 만들어놓으면 나중에 상세페이지로 바로 이동시키는게 편리해서 쓰는 것일 뿐입니다  

[글쓴이]

글