스파르타코딩클럽 - 항해99/항해99 Chapter3 - react 주특기 기본
Chapter3 - 버킷리스트의 데이터를 삭제해보자 (Quiz)
Ming
2021. 11. 23. 05:55
1. Detail.js 에서 삭제하기 버튼 만들어주기
<div>
<h1>{bucket_list[bucket_index]}의 상세 페이지입니다!</h1>
<button
onClick={() => {
console.log("삭제하기 버튼을 누름");
}}
>
삭제하기
</button>
</div>
<div>로 감싸주고 버튼을 만든뒤 console.log로 잘 작동 되는지 확인!
!
데이터 삭제를 하면 그 페이지에 남아있는 데이터가 없기때문에
뒤로가기나 메인페이지로 이동하게 만들어 줘야한다 (이거슨 FE개발자의 센스!!)
import { useHistory } from "react-router-dom";
뒤로가기 버튼 만들때처럼 useHistory를 사용 import 먼저 해주자!
const history = useHistory();
지정해주고,
<button
onClick={() => {
console.log("삭제하기 버튼을 누름");
history.goBack();
}}
>
삭제하기 버튼에 goBack()을 집어넣어준다! 그럼 완성!!!
!
이젠 삭제하기 action함수를 만들어주자!
const DELETE = "bucket/DELETE";
bucket.js 리듀서에서 action type을 지정해준다.
export function deleteBucket(bucket_index) {
return { tpye: DELETE, bucket_index };
}
액션 함수를 만들고 리턴값도 지정해준다.
case "bucket/DELETE": {
return state;
}
이후 case도 작성해주는데 일단은 확인을 위해 return 값을 state로 지정하고 다음단계로!
!
import { useSelector, useDispatch } from "react-redux";
import { deleteBucket } from "./redux/modules/bucket";
Detail.js 에서 useDispatch훅과 deletBucket 함수를 import 해준다.
<button
onClick={() => {
console.log("삭제하기 버튼을 누름");
dispatch(deleteBucket(bucket_index));
history.goBack();
}}
>
삭제하기
</button>
이후 삭제하기 버튼 온클릭에서 불러와준다. 오류가 없으면 연결은 잘 된 것이다.
export function deleteBucket(bucket_index) {
console.log("지울 버킷 인덱스", bucket_index);
return { type: DELETE, bucket_index };
}
하지만 우리가 헷갈리기 때문에 deleteBucket 액션함수 안에서 콘솔을 찍어주자
리듀서에 삭제하기 요청하는 기능을 추가하기 전에 확인!!
case "bucket/DELETE": {
console.log(state, action); // state와 action 확인위해 일단 콘솔을 찍어주자
return state;
}
default:
return state;
}
}
여기서는 배열 안의 중간 요소를 빼서 삭제 할수 없기 떄문에 그 요소를 제외하여 새 배열을 만들 수 있도록 만들어 주자
case "bucket/DELETE": {
console.log(state, action);
const new_bucket_list = state.list.filter((l, idx) => {
console.log(action.bucket_index !== idx, action.bucket_index, idx);
return action.bucket_index !== idx;
});
l = 요소 idx = 요소의인덱스 return은 true와 false로 줄수있는데
true이면 새로운 배열에 현재요소가 그대로 들어가고
false일 경우 새 배열에 이 요소가 들어가지 않는다.
return state;
}
이렇게 코드식을 짜면 다 true가 나올텐데 왜냐하면 스트링과 숫자형까지 비교를 하기 떄문이다.
!== 를 != 로 바꿔주거나 밑의 방법이 있다.
case "bucket/DELETE": {
console.log(state, action); // state와 action 확인위해 일단 콘솔을 찍어주자
const new_bucket_list = state.list.filter((l, idx) => {
console.log(
parseInt(action.bucket_index) !== idx,
parseInt(action.bucket_index),
idx
);
return parseInt(action.bucket_index) !== idx;
});
return state;
parseInt() 를 사용한 것
case "bucket/DELETE": {
const new_bucket_list = state.list.filter((l, idx) => {
return parseInt(action.bucket_index) !== idx;
});
return { list: new_bucket_list };
}
다 작성 후 console.log를 정리 해준뒤 return 값에 new_bucket_list를 반환해주면?
잘 삭제 되는것을 확인할 수 있다.
흔히 나는 오류
return { list: new_bucket_list };
여기서 바로 new_bucket_list를 리턴하면 딕셔너리 형태가 아닌 배열을 리턴이 되어서 list라는 key값이 없어 undifined가 나올것이다. 그래서 꼭! 딕셔너리 형태로 반환하도록 하자!