React shop 실습 230918 -2

페이지 여러개 만들고 싶다면?

• URL파라미터 써도 됨

이렇게 [현재 url에 입력한 숫자]를 넣어서 사용하고 싶은데 방법이 있을까?
-> 있다 ! --> useParams()

useParams()

: 유저가 URL 파라미터에 입력한 것 가져오려면 useParams() 쓰면 됨

사용방법

함수 안에

let {작명} = useParams();

작명 안에 들어갈 것은 url파라미터

맨 위 코드에서 :id로 적어줬으니까 여기에서는 아래와 같이 적어준다

let {id} = useParams();

*** 참고 : URL 파라미터를 만들 때 여러개 사용가능 !

---

• Detail.js의 코드도 아래와 같이 변경해준다

localhost:3000/detail/0 접속 화면

localhost:3000/detail/1 접속 화면

이미지를 제외한 나머지 데이터들을 각 인덱스에 맞게 잘 불러오고 있음

URL 파라미터에 정상적이지 않은 주소 입력하면?

-> id라는 변수가 이상하면 상품이 없다는 UI를 보여주자 !

• if 문 이용해서 코드 짜주면 좋을듯

만약 '가나다순 정렬'버튼을 누른 후 /detail/0 접속하게 된다면,
원래 0번째 상품 말고 새롭게 정렬된 후의 0번째 상품을 보여줄 수도 있음
따라서, 0번째 상품 말고 상품 id가 0인걸 보여주면 좋을듯

참고 JS 문법

• map()함수
  : 반복해야 하는 경우

• filter()함수
  : 조건을 만족하는 모든 요소를 찾는 경우

• find()함수
  : 한 가지 요소를 찾아야 하는 경우