230728) action.payload로 데이터의 특정값을 넘겨받을 때

deleteDataHandler: (state, action) => {
      return state.filter((data) => data.id !== action.payload);
    },

위 코드는 어떠한 data를 삭제하기 위한 코드이다.

이렇게 되면 컴포넌트에서 deleteDataHandler를 실행할 때 파라미터 안에 넣는 값이 action.payload로 들어오게 된다.

 

참고로 위 코드를 실행시키기 위해 필요한 action.payload값은 데이터의 'id'값이었다.

그렇기에 기존에는 아래와 같이 코드를 작성하였다.

 

 

(함수 실행 부분)

dispatch(deleteDataHandler(data));

(함수 저장 부분)

deleteDataHandler: (state, action) => {
      return state.filter((data) => data.id !== action.payload.id);
    },

 

이처럼 실행 부분에서 data 자체를 넘겨 받고, 함수 저장 부분에서는 action.payload.id로 id를 따로 꺼내어 비교하도록 만들었다.

 

이렇게 실행을 해도 정상적으로 잘 작동을 하지만, 지금 id만을 불러와도 실행이 잘 되는 상황이기에 data자체를 통째로 들고 올 필요가 없다. 따라서 아래와 같이 수정을 하면 data 전체를 불러오는 것이 아닌, data내의 id만 불러올 수 있다.

 

(함수 실행 부분)

dispatch(deleteDataHandler(data.id));

(함수 저장 부분)

deleteDataHandler: (state, action) => {
      return state.filter((data) => data.id !== action.payload);
    },

 

오늘도 잘 해냈다!