React실전6 URL파라미터

2022-05-08 최대 1 분 소요

Detail 컴포넌트에다가 props 로 전송을 해서 상품명(data)을 받아오자 이런 식으로 하나하나 데이터바인딩 해보면 되겠다.

헌데 지금 상세페이지를 하나밖에 안만들어놨어. 두번째, 세번째 상품들의 상세페이지도 만들고싶어.

-> 벤치마킹 해보자. /detail/0 으로 접속하면 0번째 보여주고 /detail/1 로 접속하면 1번째상품 보여주고 근데 그럼 100개 있으면 100개 쓸거야? 안되죠.

페이지를 여러개 만들고 싶으면 :URL파라미터 써도 됩니다. /detail/:id 이런식으로 상세페이지를 한번에 수백만개를 만들어 낼 수 있다.

하나의 컴포넌트로 각각 다른 내용을 보여주게끔, 장치를 마련해면 되겠지. props 활용하면 컴포넌트 1개로 다른 내용 보여주기 가능. but 라우터적으로 해결할 수 있음. detail/0으로 접속하면 0번상품 detail/1 로 접속하면 1번상품

use params 라는 걸 가져다 쓰면 된다.

let {id} = useParams();
console.log(id);

근데 여기서 누가 이상한 파라미터를 입력하면?

상품이 정렬되면 상세페이지가 이상해진다.

그런 불상사를 막고싶다면 detail/0 으로 접속했을 때 상품중에 0이라는 고유 id를 가진 상품을 보여주는거에요.

이런것들은 자바스크립트 코딩 실력의 문제이다.

참고