프로젝트 5일차, 구현을 하면서 무수히 많은 버그와 에러를 만났다.
오타나서 에러가 나기도 했고, 리액트 문법에 익숙하지 않아서 문법에서도 많은 에러가 났고 고쳐나갔다.
그러다가 오늘 기능적인 문제에 들이닥쳤다.
css 스타일은 입힐 예정임
+클릭시 수량에 맞춰서 값이 더해진다. json server에 저장돼있는 원하는 데이터들을 useEffect 훅으로 페이지 랜더링 되자마자 출력되게 함수를 호출 해서 값을 받아 왔고
받은 값을 객체에 저장해서 redux store에 dispatch를 보내야했다.
const getData = async () => {
const response = await axios.get(`http://localhost:3001/kimchis/${id}`);
const { name, image, price, description } = response.data; // price
const object = {
name,
image,
price, // 초기값
sum: price, // 합계
description,
};
dispatch(addProduct({ ...object }));
};이후에 useSelector로 store 에 있는 값을 반환해서 원하는 state를 구조분해 할당으로 원하는 데이터만 받아와 해당 페이지에 원하는 컴포넌트에 뿌려주는 로직이다.
근데 문제가 생겼다.
+버튼 -버튼 클릭 시 수량에 따라 값은 잘 출력 되지만 다른페이지를 이동 후 또는 밑에 페이지를 클릭 후 다시 해당페이지로 오면 price 값만 초기화 되었고 수량은 값이 그대로 남아있었다. + 무한루프 에러까지 발생....
결국 많은 시도 끝에 useEffect 부분에 있는 독립성 배열에 들어있는 변수들을 다 지워 보기로 했다.
useEffect(() => {
getData();
console.log(currentPath);
if (currentPath === `/kimchis/${id}` || currentPath === `/kimchis/${id}/`) {
navigate(`/kimchis/${id}/description`, { replace: true });
}
}, []); // 원래는 currentPath, navigate,id,getData 이 들어있었음밑에 페이지 클릭시 해당 state값이 잘 남아 있다. 일단은 해결 했다.
getData 때문인지 무한루프가 돌면서 무수한 에러를 뿜어냈었다. 배열을 비워서 한번씩만 랜더링 되게 다시 지정하였다.
useEffect훅은 독립성 배열 안에 값을 넣을 시 해당 state값이 변경 될때마다 내용이 호출 되고, 값을 넣지 않으면 최초 1회만 호출이 된다.
그치만 네브바 이동시 다시 접속하면 수량은 초기화 되지만 값은 그대로 담겨있었고 window.location.reload() 를 통해서 버그를 끝내 해결할 수 있었다
onClick={() => {
navigate('/cart');
window.location.reload();
}}이렇게 페이지 이동 후에 새로고침이 되게 설정을 해서 해당 페이지 값이 초기화되게 하였다
