저번시간에 이어서 상세페이지 만들고 장바구니까지 끝내고싶다 오늘은..
상세페이지 마저만들기
어제 gamesdetail.js까지 만들어서 useParams로 URL의 id값을 받아오는것 까지 만들어뒀는데 오늘은
상품아이템을 누르면 상세페이지로 넘어가면서 그 아이템의 id값이 URL에 id값에 들어가고 그 id값을 이용해 화면을 꾸려줄것이다.
그러기위해서 상품아이템들을 모두 관리해주고있는 컴포넌트인
GameList.js에서 map함수로 상품아이템 만들어준곳에
Link태그로 감싸줬다.
그리고 링크를 /gamesdetail/${a.id}로 map함수에 돌고있는 상품들의 id값을 넣어주니까 그 상품의 id값이 URL에 들어가는걸 볼 수 있었다.
데이브 눌렀을 때
102가 들어갔다.
이제 이걸이용해서.. 상세페이지의 아이템들을 꾸려줘야한다.
그전에 상세페이지 만드려다가 발견한 버그
전에 useEffect로 모든게임에서 받아온 데이터들을 allGame이라는
useState에 합쳐서 화면에 뿌려주는작업을 했었는데
거기서 useEffect에 setAllGame이 제대로 작동하지않길래 디펜덴시어레이에 allGame을 넣어줬었다. 근데 문제가 생긴게
콘솔창에 한번 찍어보니까 수도없이 많이 찍혀버리는것이었다..
이렇게 놔두면 페이지가 무거워질거같은 느낌이 들어서 고쳐줘야할거같다..
근데 이걸 고치려면 아무래도 컴포넌트마다 useEffect로 axios해오는 작업들이 문제인건가싶어서 axios를 getAjax.js라는 파일로 따로 분리해준다음 거기서 데이터들을 axios 해오기로했다.
구글링해보던중 좋은 자료를 찾아서 그걸 보고 사용을해봤다.
일단 GetAjax.js 파일을 만들어주었고 안에 코드는
이런식으로 작업을해줬다. 일단 테스트 겸 simulationData만 불러와봤는데 Promise객체를 사용한거같다. (async,await이 들어가면 Promise객체였던거같은데..)
여튼 이렇게 만들어 준 다음 저 데이터를 사용할 simulation카테고리에서 가져와서 사용해본결과
화면에 출력은 잘되는데 페이지네이션이 또 말썽이다..
그래도 일단 데이터가져오는데 무리없이 잘 가져오니까 그걸로 만족스럽다.
페이지네이션을 고쳐준 다음 다른컴포넌트에도 getAjax에서 데이터를 가져오는식으로 코드를 바꿔줘야겠다.
그리고 코드들을 바꿔주면서 알았던건데
사진이아니고 움짤인데 계속 불러오고있던중이었나보다..
데이터는 한번만 불러오면되는데 계속 불러오다보니 저렇게 작동되는거같다. 고쳐줄이유가 하나 더 늘었음..
근데 페이지네이션이 제대로 작동하지않는이유가
이 부분에서 total에 데이터의 갯수가 들어가야하는데
데이터의 갯수가 들어가기전에 화면을 구성하는거같다.
콘솔창에 찍어보면 자꾸 1개로나옴.. 데이터 10갠데
페이지네이션은 GameList.js에서 가져다가 푸터에 넣어주는중인데
GameList에서는
이런식으로 gameData라는 State에 props로 gameData를 받아와서
그거의 갯수만 뽑아줬는데 콘솔창에 찍어보니까
처음에 1개로 받는게 문제인거같다...
어떻게 고쳐야 이게 제대로 작동할까..
useEffect는 마운트됐을 때 한번만 작동한다.
그 한번이 저 1을 dispatch로 Total값에다 넣어버리는게 문젠거같다..
내가 듣는 강의인 코딩애플에서 코딩애플 선생님한테 질문한 결과로
데이터가 도착후에 html을 짜달라는 if문을 작성을 알려주셨는데
useEffect에 if문을 일단사용해봤는데 이게 또 작동이 잘된다? 작동도 잘 되고 확장도구에서 검사해봐도 계속 불러오지않으면 잘되는거니까 좋은게 좋은거겠지? 뭐.. 이렇게 완성을하기로했다.
코드 이렇게 수정했더니 잘됨.
이제 다른 카테고리의 코드들도 수정해주자.
앞에서 잘 만들어줬던 simulation 카테고리처럼 다 바꿔주기만 하면된다. 그 전에 GetAjax.js에서 다른 데이터들도 다 받아와줘야겠다.
다른 puzzel.js와 survival.js는 simulation과 같으니 생략하고
모든 데이터의 배열을 다 합쳐준 뒤 화면에 뿌려줘야하는 모든게임 All.js의 데이터는
이런식으로 데이터를 allData 라는 변수에 스프레드연산자로 한곳에 합쳐준뒤 내보내줬는데 결과적으로는 화면에 잘 나타나고있다.
전에 이 지저분했던 코드가
25줄로 줄어들었다.
화면도 이제 계속 업데이트되는 상황이 일어나지않고있으므로
잘되는거같으니 만족스럽다.
이제 드디어 다시 상세페이지를 만들어보자..
이제 드디어 저번에 useParams와 Link까지만 연결해뒀던
상세페이지를 만들어볼건데 상세페이지는
내가 클릭한 상품의 id값을 가져오기때문에
전체 데이터에서 그 상품의 id값의 데이터만 빼와서 화면을 구성해주면된다.
예를들어 1번의 데이터인 Baba is You를 클릭하면
id값이 1이 URL에 파라미터로 1이들어가고
상세페이지 컴포넌트에서 URL에 있는 파라미터(1) 을 가져와서 모든 배열중 같은 id값을 가진배열만 쏙 뽑아낸다음 그 데이터를 쓰면된다.
여기서는 find함수를 사용했고
이렇게 사용하니 잘 나타났다.
처음에는 find를 잘쓴거같았는데 언디파인드가 뜨길래 왜그런가했더니 ele를 감싸는 괄호하나를 빼먹어서 그랬다.
이렇게 잘 나타나는데 문제가 또 생겼다.
새로고침하면 에러가난다. 새로고침하면 그 데이터가 없어져서 그런가보다.
데이터바인딩 한 태그들을 다 지우니까 에러가 고쳐지는걸보니
if문을쓰면 고쳐질거같다.
이렇게 해줬다. if문으로 데이터의 개수가 하나이상이라면
html을 구성하게끔 만들었다. 이렇게해주니 새로고침해도 계속나오게됐다.
그리고 대충 디자인도 살짝만 넣어줬다.
이미지쪽만 css를 줘서 좀 이상하긴한데 오른쪽에 아직
장바구니에 추가하기랑 수량 기능까지 추가해줄것이기에 이건 내일해주겠다.
내일할거
장바구니 추가버튼과 수량 기능 추가해주기,
그리고 장바구니페이지 다 만들어주기
장바구니페이지 만들고나면 로그인기능을 구현해보면 끝이다.
다 완성하고나면 디자인 조금만 해서 생김새좀 다듬어줘야지
