221213_TIL 중복확인 react-query로 변경하기

오늘한 일

[항해 99] 실전프로젝트 마이페이지 중복확인 react-query로 변경

내일 할 일

리액트 쿼리 3강까지 듣기(6트)
[노마드코더] typescript 4강까지 듣기
[노마드코더] 챌린지3 진행
[항해 99] 실전 프로젝트 detail1 버그 고치기

오늘의 배운 점

마이페이지에서 중복확인을 하는데 비동기적으로 데이터를 받아오다보니 변경값을 바로바로 적용되지 않아서 두번 눌러야 중복확인이 올바르게 되는 문제가 생겼다. 다양한 방법으로 시도해봤는데 실패를 계속 반복하다가 전역으로 뭔가 관리가 되어야 할 것 같다는 생각이 들었는데 해당 내용을 어떻게 관리해야할 지 모르겠어서 해당 내용을 들고 다른 사람들한테 물어봤다.

처음에 시도한 방식은 state.namechk 의 값을 true/false의 boolean 값이 아닌 0,1,2의 값으로 관리하는 방법을 추천받았다.
1. 위의 경우 기존 값은 0으로 주고 1은 true 2는 false로 주어 코드를 짜봤다.
2. namechk의 값이 변경되었을 때 적용되어야하기 때문에 dependency를 namechk로 주고, useEffect로 if문을 줬다(사용 가능하면 1, 이미 있는 닉네임이면 2)
3. 이렇게 짜니 두번째로 생기는 문제는 마이페이지로 올 때마다 수정사항에 따른 알림창이 반복적으로 뜬다는 문제가 생겼고, 해당 문제는 namechk를 전역으로 관리하는 값을 0으로 주면서 초기화를 시켜줘서 해결했다.
4. useEffect 내에서 0으로 줬는데 이렇게 주니 중복확인 버튼을 누를 때마다 변경사항에 따라 알맞게 알림창이 떴지만, 수정버튼을 눌렀을 때, namechk의 값이 0으로 변경되어버려서 수정이 먹히지 않았다.
5. 그래서 수정하는(submit) 버튼에 namechk를 0으로 초기화해주는 값을 줬고, useEffect에서 0으로 초기화해주는 내용을 제외했다.
6. 이렇게 하니 연속으로 동일한 결과가 나오는 경우(ex. 사용가능이 2번 연속으로 나오거나, 중복이라고 2번 연속으로 나오는 경우 등.) 알림창을 한번 더 띄어주지않는 문제가 생겼다. 당장은 문제가 되지않지만 이후에 문제가 될 거라고 생각했다(알려주시던 분도 어떤 문제가 생길지 알려주셨지만 조금 어렵게 다가와서 이해를 잘 못했다.)
7. 추가로 코드 자체도 엄청나게 복잡하고 길어졌다. 현재 내가 가진 값과 같은지 확인을 하는 것 및 옵셔널 체이닝이 반복적으로 들어가는 문제가 생겼고 이렇게 쓸 바에는 그냥 react-query를 그냥 한 번 부딪쳐보는 게 나을 것 같다는 판단이 섰다. 알려주신 분들도 본인들은 쿼리를 써서 쉽게 해결했다고 말씀하시기도 했고.

그래서 하게 된 두번 째 시도는 react-query로 중복확인 체크하기

먼저 이전에 작성해둔 toolkit에 해당하는 부분들은 그냥 다 날려버렸다. 있는 상태로 하면 지저분한 것 + 코드가 꼬일 것 같다는 생각이 강하게 들었기 때문에..

먼저 api에서 axios로 데이터를 보내주는 코드부터 작성

  
     //닉네임 중복확인
     export const chkName = async (payload) => {
     const { data } = await axiosIns.post("/api/nickNameConfirm", payload);
     return data;
     };

모달 컴포넌트에서 닉네임 중복확인에서 success의 결과에 따라 사용 가능/불가능한지 판단해주기

  
     //닉네임 중복확인
     const { mutate: MyNameChk } = useMutation(chkName, {
     onSuccess: (res) => {
          if (res.success === true || profile.nickName === data.data.nickName) {
          toast.success("사용가능한 닉네임 입니다.", {
               autoClose: 1000,
               position: toast.POSITION.TOP_CENTER,
          });
          setNameChk(true);
          } else {
          toast.warning("이미 사용중인 닉네임 입니다.", {
               autoClose: 1000,
               position: toast.POSITION.TOP_CENTER,
          });
          setNameChk(false);
          }
     },
     });

    //닉네임 중복확인
      const NameCk = () => {
      MyNameChk({ nickName: profile.nickName });
      };

아직 제대로 query를 공부하고 한 게 아니라 구글링하고 다른 작업물들 코드보고 짜깁기해서 짜다보니, 생각보다 시간이 조금 오래 걸렸다. 그래도 원하는 기능들은 잘 작동(?)함!
원래 위의 내용들이 물어보기 전의 방법이나, 첫번째 방법의 형태로 가면 코드의 길이가 거의 2배 이상이 늘어나는데 이렇게 간결하게 작성이 되는 걸 보고 많이 당황했다. 이제 처음 쿼리를 써보다 보니 많이 어색하긴 하지만 다들 말하던 간결해진 코드라는게 어떤 건지 피부로 크게 와닿았다.
강의를 조금 더 보고 제대로 파악을 해두면 도움이 많이 될 것 같은데 사실 내 모든 문제의 베이스는 기초 부족이라는 생각이 들어서 이전에 제대로 공부하지않고 얼렁뚱땅 넘어갔던 내용들을 꼭 짚고 넘어가야겠다는 생각을 했다.
항상 질문하는 분들한테 질문하게 되는데 확실히 어떤 부분이 문제이고 하나씩 찬찬히 문제점을 찾아가는 모습이나, 나는 상상도 못한 방법을 생각해내서 알려주시는 모습을 보고 항상 마음가짐을 새롭게 하게 되는 것 같다. 마냥 부러워하기보단 공부하는 걸 배워가고 싶은데 아직 노력이 많이 모자란 탓인지 쉽지가 않다. 그리고 문제점을 파악하는 데에서도 확실하게 어떤게 문제점인지 알고 해당 내용을 파헤쳐보기보단 아 이건가? 아닌가? 하는 긴가민가하는 자세이다보니 해결법을 찾는데 조금 느린 것 같다.
이젠 더이상 “나름” 열심히 한다는 걸로는 해결되는 게 아닌 것 같다. 진짜 열심히 하는 게 중요한 것 같다. 27년을 살아 온 것처럼 더이상 살면 안될듯..
몇번째 다짐인지는 모르겠지만 오늘도 다시 한 번 다짐을 하게 되는 기회였던 것 같다. 내가 다른 사람들에게 물어보고 도움을 얻기보단 도움을 주는 사람이 되고 싶은데 쉽지가 않다.
다시 한 번 가보자고~
멘탈 붙잡자고~~~~~~~~~~~~

221213_TIL | 중복확인 react-query로 변경하기

오늘한 일

내일 할 일

Further Reading

221116_TIL | 옵셔널체이닝

221119_TIL | 필터만들기

221125_TIL | 상세2로 연결(필터 칩 수정중)