본문 바로가기

React Query2

Next.js의 fetch와 react-query react-query가 제공하는 기능을 보면서 사실 대부분의 기능은 next.js에서 제공해 주는 확장된 fetch 함수로도 대체가 가능한데 굳이 react-query를 사용할 필요가 있을까?react query는 next.js에서 필요하지 않을수도 있다! 하지만 서버 컴포넌트가 아직 지원하지 못하는 사용 사례를 아주 유용하게 지원해 줄 수 있다!Next.js의 fetch와 react-query의 특징데이터 페칭 로직을 서버로 옮길 수 있다.DB와 더 가까이에서 무언가를 처리할 수 있다.번들 사이즈가 클라이언트에 영향을 주지 않는다.Next.js의 fetching 솔루션Next.js의 app router는 async 방식을 통해 데이터를 페칭 한다.Next.js 측에서 권장하는 방법은 다음과 같다.ser.. 2024. 6. 5.
React Query에 대해 알아보자 React Query란?React Query는 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어주는 라이브러리이다. React Query의 장점MobX나 Redux를 사용하다 보니 보일러플레이트 형태의 코드가 많이 발생하는데, React Qeury를 비교적 코드의 양이 적고 구조가 단순하여 추후 유지 보수가 용이하다.*보일러 플레이트(BoilerPate)란? 최소한의 변경으로 여러 곳에서 재사용되지만, 반복적인 코드로 인해 많은 양의 코드를 양산하는 것.Caching을 통한 어플리케이션 속도 향상동일 데이터에 대한 중복 요청 제거오래된 데이터의 상태를 파악하여 업데이트Garbage Collection(GC)를 이용하여 서버 쪽 데이터 메모리 관리React Hooks.. 2024. 6. 5.