[React-Query] 게시판, 인기스택 컴포넌트 query 에러

📗 리팩토링하는 이유

1. 캐싱

데이터에 변화가 없는 경우에도 useEffect의 의존성 배열값이 바뀔 때마다

getMember와 getBoard 함수가 호출되는 것을 막을 필요가 있어보임

 

2. 간결한 코드

리액트쿼리에 내장된 로딩, 에러처리 기능을 사용하면

간단하게 구현이 가능하고 코드가 간결해서 나중에 수정사항이 있어도 

어렵지 않게 수정이 가능함

---

📗 React-Query 리팩토링 에러

react-query key 에러

 

➡️ react-query의 key값이 고유하지 않아 발생한 오류

인기스택 컴포넌트의 쿼리 키를 변경함으로써 해결

 

---

UseEffect 에러

 

useEffect 에러

리액트 쿼리의 isLoading 기능을 사용하려고 했지만 에러가 발생했다.

 

프로젝트의 데이터가 적기 때문에

서버의 모든 데이터를 받아옴 -> useEffect로 필터링 함수가 실행 -> 게시글 리렌더링

위와 같은 순서로 클라이언트단에서 데이터를 필터링하고있다.

(useEffect는 return  이전 최상단에서 호출되어야하기 때문에 지금 방식으로는 에러나는 상황)

 

즉, 쿼리를 추가해서 서버의 데이터를 필터링하는 리액트 쿼리의 useQuery 동작 방식은

현재 프로젝트에서 구현된 필터링과 구조적으로 차이가 있어

api 통신 방식 변경없이는 리팩토링은 어려울 것으로 판단했다.

따라서, 게시판 리팩토링은 우선순위를 뒤로 미루고 
필터링 기능이 없는 인기 스택 컴포넌트에만 리액트 쿼리를 적용하기로 했다.

 

---

📗 앞으로 공부할 내용

1. React 렌더링 원리, useEffect, useState

https://velog.io/@soshin0112/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-Hooks
한 4달전에 이론만 배우고 블로그에 작성했을 때에 비해

실제로 프로젝트에 적용가능할 정도로 지식이 늘었다고 생각했는데

여전히 동작 원리에 대한 이해는 부족한 것 같아서 공식문서를 한 번 더 봐야겠다싶었다.

 

2.  React-Query  유데미 인강

https://www.udemy.com/course/learn-react-query/

useQuery에서 정말 일부분 기능만 써봤는데도 코드가 짧아지고

기능 구현에서 시간을 많이 절약할 수 있었다.

리액트 쿼리에 대해서 공부해놓으면 좋을 것 같아서 인강을 보고 공부하기로 했다.