1. 구현하기
진행 상황
- 내주변 미용실 페이지
- 마이페이지의 강아지 정보
- 모달 구현
진행 예정
- 컨펌 모달 구현 후 delete와 연결
2. TIL
2-1. 리덕스 툴킷 사용하기
리덕스 툴킷으로 상태를 꺼내오기
지난 프리 프로젝트에서는 상태관리 라이브러리를 사용하지 못했었는데 이번에는 리덕스 툴킷으로 상태관리를 하고자 조금씩 프로젝트에 적용을 해보고 있다.
강아지 에디터 페이지를 등록하기 버튼을 누르면 등록 페이지로, 수정하기 버튼을 누르면 수정 페이지로 사용하고 싶어서 리덕스로 수정 상태를 관리하려고 slice 파일을 만들어서 적용했지만 콘솔창에는 오류가 떴었다.
시도한 방법
not a function이라는 짧은 메시지와 함께 비슷한 에러들이나타났었다. 에러가 난 부분의 코드는 버튼을 클릭했을 때 edit이 실행되는 부분이었다.
리덕스에 대해 이해가 덜 되었던 상태라 공부를 조금 더 하고보니 edit은 액션이지 함수가 아님을 깨달았다. 그래서 아래와 같이 코드를 작성하였다.
import { edit } from "../modules/redux/editSlice";
<S.Title>{edit ? "강아지 수정" : "강아지 등록"}</S.Title>;edit이 true 라면 강아지 수정이라는 텍스트가, 아니라면 강아지 등록이라는 텍스트가 나타나게 하고 싶었다. 하지만 수정버튼을 눌러도 강아지 수정이 삭제 버튼을 눌러도 강아지 수정이 나왔다. 그래서 edit의 상태를 확인 하고자 콘솔로그로 찍어보니 action 객체를 반환하는 것을 확인할 수 있었다.
해결 방법
아직 리덕스에 대해 이해가 부족한 것 같아 공부를 조금 더 했더니 해결 방법이 보였다. 위의 코드에서 import해온 것은 액션이고 내가 원하던 방법은 액션이 아닌 edit이라는 state 였다. 그래서 상태를 꺼내 쓸 수 있는 useSelector로 edit이라는 상태를 꺼내오니 액션 객체가 아닌 값이 콘솔창에 찍히는 것을 확인할 수 있었다.
import { useSelector } from "react-redux";
import { selectEdit } from "../modules/redux/editSlice";
const { edit } = useSelector(selectEdit);
2-2. createSlice 파일 작성하기
slice 파일에 select 변수 만들기
삭제 기능을 구현하던 중 삭제 버튼을 눌렀을 때 컨펌 모달이 뜨고 취소 버튼을 누르면 모달이 꺼지고, 삭제 버튼을 누르면 삭제되게끔 구현하고 싶어서 수정처럼 삭제도 리덕스로 상태를 만들어주고 boolean인 상태값을 활용하고자 slice 파일을 작성하고 적용했지만 에러가 발생했다.
시도한 방법
export const deleteSlice = createSlice({
name: "delete",
initialState,
reducers: {
clickDelete: (state) => {
state.isDelete = true;
},
cancleDelete: (state) => {
state.isDelete = "null";
}
}
});
export const { clickDelete, cancleDelete } = deleteSlice.actions;
export const selectDelete = (state) => state.isDelete;
export default deleteSlice.reducer;우선 콘솔로 위의 selectDelete 부분을 찍어보았다. 클릭을 하면 true가 반환되어야 하지만 undefined가 반환되었다. 액션이 잘못 작성된 것 같지는 않았고 문제라면 select 변수 부분에서 state를 꺼내오는 로직이 잘못 된 것 같았다. 그래서 다시 공부를 했다.
해결 방법
export const selectDelete = (state) => state.delete;
const { isDelete } = useSelector(selectDelete);공부 끝에 select 변수 부분이 잘못 작성 됐음을 깨달았다. state에서 바로 isDelete로 접근하는 것이 아니라 우선 리듀서의 이름인 delete로 접근해야하는 것이었다.
delete로 접근하면 initialState로 작성한 상태로 접근이 가능한데 useSelector로 상태를 꺼내올 때 객체로 작성했으므로 구조분해할당으로 꺼내오면 된다. state.isdelete로 접근했을 때와 state.delete로 접근했을 때의 값을 콘솔로 찍으면 아래와 같다.
