Chapter3 - 버킷리스트의 데이터를 삭제해보자 (Quiz)

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가 나올것이다. 그래서 꼭! 딕셔너리 형태로 반환하도록 하자!