[React] useParams 사용하기

1. Detail 파일 데이터 바인딩하기!

 

첫번째 Data 파일에 props 를 전송해 준다.

 

App.js 에 받아놓은 데이터를 props 를 통해서 detail 에 전달해준다.

props 를 통해서 App 에서 신발 데이터를 받아서 아래와 같이 넣어준다.

 

여기서 ! 그냥 shoes 관련 data 값을 하나 더 선언해서 하면 안되나요?

데이터는 여러곳에 뿌리는것이 아니라 한곳에서 관리하고 갖다 쓰는게 맞다.

 

신발이 3개이고 각 신발마다 detail 페이지를 만들어 주고 싶으면??

그런데 이렇게 하는게 맞나?  다른 방법은 없을까 ??

 

이런 의문이 들때에는 다른사이트를 참고해보자!

 

 

상품을 누르면 해당 상품의 특정 부여 숫자가 나온다.

누가 슬래쉬 뒤에 특정 번호로 입장을 하면 각자 맞는 상품을 보여주면 된다.

 

이러한 반복되는 부분을 router로 해결이 가능하다 바로!

 

url parmeter 를 이용하는 것이다.

여러개의 페이지를 만들고 싶으면

여기서 :id 를 url 파라미터 라고 한다.

심지어 한글을 쳐도 들어가 진다.

 

이제 입력값으로 화면 내용이 달라지기만 하면 된다!!

 

입력된 값이 모두 shoes[0] 이기 때문에 어떤 :id 즉 url파라미터를 이용해도 다 한화면만 나옴.

누가 /0 접속하면 0번상품 /1번 접속하면 1번 상품의 정보가 나오게 하고 싶다.

 

 

이러한 요구를 들어주는! useParams!!!

useParams 를 import 해준다

useParams 를 임포트 하고나서 useParams() 라는 값은 url 뒤에 붙인 아이디 값이다.

즉 우리가 /:id 로 주소를 설정한 detail 페이지 내부에서

입력하고 들어간 주소의 값 /detail/ 특정 값 

이 특정값이 useParams(); 이다.

그래서 이 useParams(); 의 값을 변수에 넣고 그 데이터 값으로 각페이지 차이를 만들어 줄 수 있다.

변수에는 반드시 중괄호를 쳐줘야 한다

이 문법을 destructuring문법이라고 하고 {}에 담긴 변수를 쉽게 이용하고자 할때 사용한다.

 

변수를 바로 쓰면 object에 들어가 있고 이 변수를 {id}에 담아서 쓰면 우리가 원하는 숫자 1이 나온다.

여기서 우리가 let {id} 가 아닌 let {id2}로 하게 되면?

id2 는 none 값이 나온다. 왜 ??

url 파라미터를 id 라고 지정했기 때문에 {id} 에 저장하여야 한다.

id2를 쓰고싶은데요 ??

이렇게 사용해 주면 된다!!

 

 

여기서 !! 만약 url 파라미터에 숫자가 아닌 문자가 들어오면?

isNaN을 이용해 체크 해 줄수 있다.

여기서 NaN 은 Not a Number 의 약자로 안의 데이터 값이 숫자면 false 숫자가 아니면 true를 반환한다.

 

url 파라미터는 여러개도 가능하다!!

이런식으로 표현이 가능하다.

 

 

 

여기서 !! data값을 살펴보자.

 

data에는 상품의 정보 뿐만 아니라 

 

각 배열마다 고유의 id 값을 가지고 있는데

 

이것을 이용해서

 

상품의 정보를 불러오는것이 배열의 순서를 통해서

 

불러오는것보다 훨씬 안정적일것이다.

(배열 재정렬 등의 순서바뀌면 detail에 영향을 줄수 있는등등)

 

 

 

 

 

 

 

 

 

 

이를 위해 javascript 의 array.filter() or array.find()를 공부할 필요가 있다.

 

 

array.find()의 경우 원하는 요소를 찾자마자 바로 종료가 되고

 

array.filter()의 경우 특정 조건이 부합되는 배열의 모든 값을 배열의 형태로 리턴한다.

 

데이터가 담겨있는 props.shoes에 find를 이용하려면

 

props.shoes.find((x)=>x.id==id)}

 

받아온 배열값 x 에서 x.id중에 id가 같은 배열을 0번 배열부터 쭉 찾아서 찾자 마자 종료가 됨.

 

여기서 x.id 는 배열 내부에 있는 id 값들이고 == id 의 id 는 위에 useParam();에서 값을받은 id 이다.

 

 

종합적으로 복습하기위해서 useParams 에서 받은 id를 바꿔보면

 

:id 를 :id2 로 바꿔주고

useParams에 값을 destructuring으로 값을 뽑아낸 id2로 바꿔주면

정상 작동 됨을 알 수 있다.

 

 

 

 

 

 

 

 

 

 

출처 : 코딩애플 React 강의입니다.

스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.

https://codingapple.com/