메인페이지에서 상품눌러서 이동하기
이제 메인페이지에서 상품을 누르면
각 상세페이지로 넘어갈수있게 만들어주자 !
일단 누르면 무언가 작동해야하니, onClick를 넣어야하는데
컴포넌트에는 이런 이벤트를 달면 안된다 ! 가끔 에러가 난다.
그러니 function으로 만들어놓은 컴포넌트 안에다가 !! 넣어주자
이렇게 내가 사용하고싶은 컴포넌트 최상위에 달아주자
(그렇다고 return 밖에다 하면 안된다)
history() 함수를 쓸때는 항상 useHistory()를 만들어주고 쓰자
근데 props.i로 찾아주는건 사실은 잘못된 방법이고
상품의 고유 아이디 값을 넣어주어서 찾는게 더 좋은 방법이다
이렇게 말이다 !
장바구니 +,-를 개별항목마다 적용하기
이러한 오류를 수정해보자! 
상품 고유의 id값을 넣어주게 되면 손쉽게 해결이 가능하다
여기서 '데이터'라고 적어놓은것은 우리가 id명을 보낼수있게 별명을 붙인거라고 생각하면 쉽다
다시 index.js로 넘어와서 reducer안에 수정사항을 고쳐보자
기존에는 수량증가란에 copy[0] 이런식으로 적혀있었지만
이제는 아까 별명으로 적어놓은 데이터(id)의 값을 받아오게끔 하여
개별로 증가할수 있게끔 해놓았다.
주문하기를 누르면 페이지내의 진짜 상품을 추가해보자
우리는 이전에 찾은상품이라는 변수를 만들어놓았고
그 변수안에는 shoes의 데이터를 담아놓았다 이걸 쓰면 된다 !
하지만 문제가 생겼다
우린 중복 상품을 추가할때마다 갯수가 늘어나는게 아닌 항목으로 늘어나서 쓸데없는 공간이 늘어나고있다, 이걸 없애보자 !
우리는 장바구니 데이터를 redux에서 '항목추가' 로 미리 만들어놓았으니 이곳을 손보도록 하자
현재 reducer안에 '항목추가'란은 이렇게 되어있다
"데이터가 push가 되면, 초기값에 데이터 자체를 추가해주세요~"
라고 말이다
우리가 해야할 것은 이거다 ! 이러한 조건문을 이곳에 추가해보자 
먼저 우리가 물어보자(조건을 만들자)
find() , findIndex() 라는 자바스크립트 함수를 쓰면 array 안에서 데이터를 찾아준다
findIndex() : 몇번째 항목에 있는[0,1,2...] 데이터인지 찾아줌
find : 값 자체를 찾아줌 (name : kim)
여기서 a라는 파라미터는
array안에 담겨있는 하나하나의 데이터들을 의미함
그 데이터들을 가져와서 비교하는거임 ! 이게 일치하냐? 라고 !
array 안에 있던 데이터의 id값과
우리가 만들어놓은 데이터(payload).id 가 같냐? 라고 정확하게 물어보자 !
이게 맞다면 index가 남는다
array에 몇번째에 출현하는지 값이 남게 된다 0,1,2 이런식으로
그 수를 변수에 담자 !
알기쉽게 found라고 변수를 만들고 거기에 찾은 수를 담으면
중복된 id값을 담는거라고 보면 된다 !
요약하자면 ! 이렇다
그러면 주문하기 버튼을 누르면 작동한다 !
1.장바구니로 '액션.데이터' 가 전송이 된다
2. 그 다음 초기값이라는 데이터안에, 이번에 요청해서 들어온 데이터의 아이디값이 일치하는게 있는지 검사한다
3.검사후 일치하는게 있다 ! 그러면 그 데이터가 몇번째에 있나,
몇번째에 출현하는지에 대한 값을[0,1,2 ...]를 let fount 변수에 저장 !
4.found 라는 변수는 이제 초기값과 새로들어온값이 중복되는 수에 대한 값을 담고있게됨 !
최종적으로 이렇게 하면
id가 겹치는것들은 갯수만 추가를 해주고
id가 다른것은(else) 항목을 추가(push)해주게 된다
이렇게하면 기존에 초기값에 넣어둔 데이터의 id값에 적용되서
갯수가 추가되니 잘 수정해주도록 하자 !
