저번시간에 이어 오늘작업한 내용 정리해두기
저번시간에 일어났던 버그를 먼저 고쳐보고 시작하기로했다.
저번에 생겼던 버그고치기
어제 작업했던거에 생겼던 버그는 Swiper에 이미지를 넣었는데
src에 0번째 1번째 2번째 이미지를 넣으니 에러가났었다.
그러한 에러가 발생한 이유는
state에 axios로 불러온 데이터를 넣어서 작업하려했는데 기존 state에는
useState([{
id : 0,
title : '',
price : 0,
img : '',
}])
이런식으로 임시 데이터를 박아넣어놨는데
html을 구성할 때 src에 불러온 이미지 0번째 1번째 2번째가
state에 임시데이터를 axios로 불러온 데이터로 갈아치우기 전에 html을 먼저구성을 해버려서
에러가 발생한것이었다.
에러해결은 생각보다 간단했다.
삼항연산자를 사용해서 state에 객체 수가 3개가 넘으면 이미지를넣고 그게아니면 비워두게해뒀다
<SwiperSlide>{puzzel.length > 3 ? <img src={puzzel[0].img} alt="slide"/> : <></> }</SwiperSlide>이렇게 작업해주니 정상적으로 이미지가 에러발생없이 잘 호출이됐다.
이번시간에 변경한 코드들
저번시간에 작업해뒀던거에 오늘 작업하면서 리덕스툴킷도 사용해보면 좋지않을까 싶어서
리덕스툴킷을 추가해줬다.
npm install @reduxjs/toolkit react-redux
리덕스 툴킷을 설치해주고
store.js를 만들어 준 뒤 그 안에서 puzzelData라는 createSlice를 만들어 준 뒤
빈배열을 넣어주고 메인화면에 들어가면 useEffect로 axios받아온 데이터를 dispatch로 전송해서 puzzelData에 데이터를 넣어줬다.
코드는
(store.js)
import { configureStore, createSlice } from '@reduxjs/toolkit'
let puzzelData = createSlice({
name : 'puzzelData',
initialState : [{}],
reducers : {
puzzelDataChange(state,action){
return state = action.payload
}
}
})
export default configureStore({
reducer: {
puzzelData : puzzelData.reducer,
}
})
export const { puzzelDataChange } = puzzelData.actions;위 처럼 store js를 만들어줬고
App.js
let puzzel = useSelector((state)=>{return state.puzzelData})
const dispatch = useDispatch()
useEffect(()=>{
axios.get('https://raw.githubusercontent.com/haegi-git/GameShopData/main/gamedata/puzzel.json')
.then((result)=>{
dispatch(puzzelDataChange(result.data))
})
},[])
App.js에서 dispatch로 데이터 보내주고 useSelector로 사용했다.
다른페이지에서도 잘 작동하는지는 계속 작업해보면서 알아가야할것같다..
오늘 진행한 점
간단한 작업들을 진행해줬다.
App.js에 작업하기에 코드가 너무 지저분해지길래 Home.js로 페이지를 나누어줬고
페이지를 나눈건 리액트 라우터를 사용해서 화면에 출력했다.
page폴더에 Home.js를 만들어주고 App.js에서 작업했던 모든 코드를 다 옮겨주었다.
덕분에 App.js는 코드가 굉장히 깔끔해졌다.
보다시피 23줄이면 끝나는 깔끔한 페이지가됐다.
그리고 여태 작업했던 코드들은 Home.js로 들어갔기때문에 좀 지저분하다 저기는
그리고 슬라이드 아래에 추천게임들을 추가해줬다.
{/* 추천 게임들 */}
<section className='recommend'>
<div className='recommend_left'>
시뮬레이션
{[1,2,3].map((a,i)=>{
return(
<div className='recommend_item'>
<img src={puzzel[0].img} alt='recommend_image'/>
<h4>타이틀</h4>
<p>가격</p></div>
)
})}
</div>
<div className='recommend_center'>
퍼즐
{[1,2,3].map((a,i)=>{
return(
<div className='recommend_item'>
<img src={puzzel[0].img} alt='recommend_image'/>
<h4>타이틀</h4>
<p>가격</p></div>
)
})}
</div>
<div className='recommend_right'>
생존
{[1,2,3].map((a,i)=>{
return(
<div className='recommend_item'>
<img src={puzzel[0].img} alt='recommend_image'/>
<h4>타이틀</h4>
<p>가격</p></div>
)
})}
</div>
</section> 슬라이드 아래에 이렇게 추가해줬다. 화면의 모습은
이렇게 화면이 구성이되었다. css에 대한 코드는 남기지않을것이다.. 디자인은 못하니까..
전체적인모습
일단 이정도로 홈화면을 구성해주고 GAMES부분을 만들도록하겠다.
(디자인적인 부분은 맨 마지막에 해줄예정..)
GAMES 부분은 쇼핑몰의 상품들을 보여줄 부분이기때문에 일단
라우터로 연결을 해주고 GAMES 안에서는 중첩라우팅으로 카테고리를 분류해주려한다.
App에서 라우터로 나누어준 모습과
중첩라우팅을 해주기위해 games안에 네개의 라우트를 더 해주었고
Games.js에서
Outlet으로 화면에 출력될 수 있게 해줬고 Link태그로 카테고리 이동버튼을 만들어줬다.
(제대로 사용하고있는지는 잘 모르겠다..)
일단 이정도로 만족하고 모든 게임 부분을 만들어주기위해
json데이터를 다 가져오는 작업부터 진행해보겠다.
store.js에 앞에서 만들었던 퍼즐데이터처럼 똑같이 두개 더 만들어주었고
Games.js에서 일단 대충 불러와보고 잘 출력되는지 확인도 마쳤다.
이제.. 이것들을 하나의 배열로 뭉쳐준 뒤 전체게임에 뿌려주면 되지않을까....
그리고 하나 궁금한게 생겼는데 axios를 필요한 컴포넌트에서 매번 useEffect를 써서 불러오기가
번거로운데 App.js에서 한번에 끝내두고 store에서 꺼내와서 사용할 순 없을까..?
이걸 먼저 해결해보고 다음 작업들을 이어가보자..
다음 해결해야할 목표
axios작업을 매번 그 컴포넌트에서 불러와서 사용한다는 번거로운점을 해결해보고싶다.
(사실 store.js에서 axios사용해서 그 이름에 맞는 데이터에 바로 넣어주고 사용하려했는데
promise객체로 fulfilled상태가 되어 출력이되는데 이걸 사용할 줄 몰라서.. 포기했었다..)
다음에는 promise객체로 fulfilled상태로 나오는걸 해결하던가 다른 방법을 찾아서
코드를 줄여보고싶다.
App.js에서 한번만 데이터를 넘겨주고 다른곳에서 자유롭게 사용할 수 있게 하거나
store.js에서 axios로 호출해서 데이터를 미리 만들어서 바로 다른곳에서 자유롭게 사용할 수 있게 하거나
정 안되면 여러곳에 질문하고다녀봐야지..
오늘까지의 결과물
메인화면 이렇게 만들어주었고
GAMES 카테고리 안에 중첩라우팅해주었다.
안에 요소들을 채우는건 위에 해결해야할 목표를 한번 해본 뒤에 만들어줄것이다
