일단 먼저 우리가 만들어놓은 디테일 페이지에 데이터 바인딩을 해보자.
상위 app.js 컴포넌트에서 만들어놓은 shoes 라는 state를 기억하는가? 거기에 데이터가 들어가있으니 props로 받아와야겠지? 그래서 적은것이 상단 이미지다.
Detail(props)를 주었고, 내가 주려는 위치
제목,내용,가격 부분에 따다닥 박았다
props.shoes[0].(title,content,price) 이런식으로 데이터 바인딩 하면 쉽다
아 그리고 잊지 말아야할것은
우리가 만들어놓은 Detail이라는 컴포넌트에서
"shoes라는 스테이트 사용하겠습니다~"라고 저렇게
적어놔야함(shoes={shoes}
선생님!!!
"그냥 Detail.js에 이렇게 적어놓으면 안되요? props 귀찮은데 그냥 이렇게 쓰면 큰일나나요?"
네
그렇게 해도 되는되는데
중요한 데이터(state)들은 보통 최상위 컴포넌트에 저장해두는게 그냥 국룰이라고 생각하시면 됩니다 이제 조용히하고 상세페이지 3개 만들어보죠?
이거를 해볼겁니다
이렇게 단순 노가다로도 만들수 있겠지만 우린 개발자니까 조금 더 개발자스럽게 만들어보자
저렇게 /:id 하면 "아무 문자나 다 받아주겠습니다~"하는 url의 파라미터다, 저 콜론뒤에 작명은 마음대로 해도 된다
근데 지금은 어느페이지를 가도 똑같은 상품만이 보이니까 다른페이지마다 다른 상품이 보이게 설정하려면? 아까 위에서 쓴 url의 파라미터 문법을 여기서 쓰게 된다
그리고 또 다시 Detail.js 상단에
useParams 라는 훅을 추가해주자 그리고 다시 변수로 id를 선언해주고 거기에 useParams를 넣어주자
그러면 이제 파라미터값을 변수에(id) 저장해서 쓸수있다
이 함수를 useParams(); <- 를 쓰면 이 자리에 중괄호가 남는다
id자리에 있는 숫자 혹은 문자를 의미하게 된다 
이제 다시 우리가 데이터바인딩을 할 장소로 돌아와서
저기에 만들어놓은 변수 id를 넣어두면!
그 숫자들이 데이터바인딩이 되면서 우리가 넣어놓은 shoes state의 array값과 일치하기 때문에 그 순서에 맞는 데이터를 불러오게됨 와우 !!!
여기서 심화과정, 정렬기능같은 것을 사용할 경우 shoes state의 array 순서가 바뀌게 되어서 페이지가 엉키게될 때 ! 
그럴때는 상품 데이터 파일에서 보면 입력해놓은 id값을 활용하자. 이거는 정렬기능을 사용해도 뒤바뀌지 않는 상품의 영구번호가 된다
그래서 우리가 정렬 기능을 사용해도 지정페이지마다 고유의 상품이 나오게 하려면! 저기있는 id값을 이용하자.
이건 좀 이해가 안가서 도움을 받자..
뭔가 뇌가 번뜩이는 힌트다
그래도 몰라서 봤다..
먼저 찾은상품이라는 변수를 만들어주고, 거기에 props로 데이터를 받아오고 새로운 ES6 신문법인
함수 find(); 를 사용한다
이거는 Array 안에서 원하는 자료를 찾고싶을 때 사용합니다.
-
find()는 array 뒤에 붙일 수 있으며, 안에 콜백함수가 들어갑니다.
-
콜백함수 내의 파라미터는 (제가 상품이라고 적은거) array 안에 있던 하나하나의 데이터를 의미합니다.
-
return 오른쪽엔 조건식을 적을 수 있습니다. 이게 참인 데이터만 새로운 변수에 저장해줍니다.
-
조건식엔 그리고 그걸 현재 URL의 /:id에 적힌 값과 상품의 영구번호 (상품.id)가 같은지 비교하고 있는 겁니다.
그래서 /detail/0으로 접속시 찾은상품이라는 변수를 출력해보시면 아마 영구번호가 id : 0인 데이터가 나올겁니다.
/detail/1로 접속시 찾은상품이라는 변수는 영구번호가 id : 1인 데이터일겁니다.
그래서 찾은상품이라는 변수를 이용해서 상품명, 가격 HTML 부분에 데이터바인딩을 했을 뿐입니다.
성공!
(강사님 해설 출처..)
