📖 진행한 공부 📖
- json server에서 axios로 데이터 불러오기
- 지출 항목에 누가 썼는지 닉네임 보여주기
- react-query로 CRUD 리팩토링 해보기
어제 로그인이 계속 일정 주기마다 풀리는 바람에 마이페이지 작업이나 홈페이지 작업 등 여러모로 불편한 점이 많아서 아예 유효시간을 설정해줬더니 한결 편해졌음
accessToken을 갱신 시키는 방법은 일단 우선순위에서 좀 미뤄두고 필수 구현사항부터 구현하기로 맘 먹었음
json server
일단 json server를 깔아줘야 하기에 yarn add json-server
명령어로 json server를 install
그 후 yarn json-server ./db.json --port 4000 명령어를 입력해서 port를 실행시켜줬다
기존 Router.jsx에서 관리했던 항목들의 state들을 이젠 db.json 파일을 하나 만들어서(src 밖에 만들었음) 그 안에 임의로 집어넣어줬는데 여기서 문제 발생.
내용을 수정하거나, 삭제하기를 누른다면 임의로 만들어 둔 항목들이 전부 똑같이 수정되거나 삭제된다는 것
근데 이건 한 눈에 딱 보자마자 "아 id가 고유한 값이 아니라 다 똑같이 돼있어서 그렇구나" 라고 파악했다
기존에는 uuidv4로 각각 다른 id를 부여해줬었는데 db.json에선 다 똑같은 문자열 형태인 "uuidv4()"로 돼있어서 그랬었던 거다
그래서 해당 문제는 어차피 임의로 저장해놓은 데이터 뿐이니 id 뒤에 각각 +1씩 해주니깐 해결됐음 이건 어디까지나 임시방편이니 추후에 리팩토링하게 된다면 고쳐야 할 거 같다
그리고 기존 Router.jsx에서
const [list, setList] = useState([
{
id:uuidv4(),
item: "미용",
price: 35000
},
])이런 식으로 state를 관리했었는데 이젠 해당 컴포넌트에 남겨둘 이유가 없으니 수정을 해줬다.
기존의 list에 관한 state의 기본 값을 빈 배열로 바꿔주고
화면에 정보를 불러와야 하는데 최초 렌더링 시에만 불러오게끔 useEffect를 사용하고 dependency array 값으로 빈 배열을 넣어줌으로써 최초 렌더링 시에만 useEffect 안에서 axios.get 메서드를 통해 json server에서 필요한 데이터를 가져오는 로직을 작성해줬다
데이터가 잘 불러와지는 걸 확인할 수 있었다
이제 데이터를 불러오는 거까진 성공했으니 지출 항목에 대해 누가 지출했는지에 대한 정보를 보여주면 되는데 해당 기능을 구현하려면 일단 등록 버튼을 눌러서 내용을 등록했을 때, 기존의 item, price, date,detail의 정보만 들어갈 게 아니라 유저 정보도 넣어주면 된다.
Home.jsx
기존의 내용에서 useContext로 getUserInfo, userInfo를 받아온 다음에 handleAdd 함수 내에서 기존의 4가지 항목 뿐만이 아니라 createBy, createByNickName을 추가함으로써 어떤 유저가 지출을 작성한 것인지도 알 수 있게끔 로직을 구성하였다.
axios.post 메서드를 사용해 db.json에 해당 내용이 잘 들어가게 해줬다.
리스트에 누가 작성했는지 보이도록 구현 성공
tanstack query (react-query)
yarn add @tanstack/react-query-devtools 명령어로 설치
react-query를 사용하고 싶은 곳을 QueryClientProvider로 감싸주기
이렇게 해서 세팅은 끝이 났다
react-query는 세팅이 간단해서 좋은 거 같다!
useQuery()
useQuery()를 사용하면 선언적으로 데이터를 가져올 수 있다고 한다.
그래서 정보를 불러와야 하는 컴포넌트 내부에서 useQuery()를 사용해 코드를 구성해봤다.
허나 위와 같이 작성하니깐 로딩 중입니다.가 화면에 잠깐 나타나며 이런 오류를 발생시켰다
그래서 무엇이 문제인지 알아봤는데 코드에서의 setList(data);
부분이 컴포넌트 렌더링 과정에서 직접 호출되며 리렌더링을 일으키기 때문에 무한 루프를 발생시키는 것이라는 것을 깨달았다
어떻게 해결해야할지 고민 끝에 useEffect를 사용해 data가 업데이트 될 때 setList를 호출하는 방법을 채택하기로 했다
이렇게 수정을 해주니 아무런 오류없이 정상적으로 구동되는 걸 볼 수 있었다
useMutation()
useQuery로 데이터를 불러오는 건 성공했으니 이제 useMutation을 사용해서 추가, 수정, 삭제를 해야 할 차례
인데 수정, 삭제는 시간상 구현을 못했지만 추가 부분만 해보겠음
AuthContext.jsx
AuthContext.jsx에서 useMutation()을 사용해 mutatinFn에는 위에 만들어둔 addExpenses 함수를 넣어주고 onSuccess를 사용해 성공시 invalidateQueries를 사용해 데이터를 최신 데이터로 업데이트 시켜줌
Home.jsx
useContext 안에 addMutation을 가져온 후에
가져온 addMutation(newList)를 해준다면?
이런 오류가 뜸 여러분은 저처럼 바보같은 짓 하지 마세요
addMutation(newList)가 아니라
addMutation.mutate(newList); 이렇게 mutate를 통해 호출해야함
그나저나 등록은 잘 되는데 왜 2개씩 등록이 되는 거임?!!!
2개씩 등록되는 이유에 대해선 handleAdd 함수가 2번 실행된다던지, useMutation 훅이 두 번 호출되어 두 개의 항목이 등록된다던지...
뭐가 문제일까 찾아봤는데 
Home.jsx에서 게시글을 추가하는 기능을 하는 addMutation 외에도 위에 똑같은 기능을 하는 postedList 변수가 있었기에 2번씩 추가됐음
역시 등잔 밑이 어둡다.. 잘 살펴보자 ㅠㅠ
해당 부분을 지워주니 정상적으로 1개씩 추가되는 걸 확인할 수 있었다 오류 해결 나이스~
