![]()
Intro오늘날 리액트 개발의 데이터 패칭에서 react-query를 많이 사용합니다.항상 도구의 사용에 앞서 도구가 어떤 역할을 수행하는지 자세히 이해해볼 필요가 있다고 생각합니다. 도구의 니즈를 구체화하는 것이죠.이번 시간에는 리액트에서 제공하는 API(useEffect, useState)를 이용해서 데이터 패칭을 해보면서 어떤 기능이 추가로 필요한지 고민해보겠습니다. 이번 글에서는 아래 코드를 바탕으로 설명을 진행하겠습니다. 완벽해보이시나요? 아래 코드에는 5개의 버그가 존재합니다.function Bookmarks({ category }) { const [data, setData] = useState([]) const [error, setError] = useState() useEffect((..
![]()
서론next13은 React Server Component(이하, RSC)을 중심으로 app router라는 큰 변화를 가지고 왔습니다.RSC과 server-action의 등장으로 인해 이젠 서버사이드 데이터 패칭의 범위가 확 늘어났습니다. 더불어 이런 서버사이드 요청에 대한 캐싱을 지원하기에 그럼 이제 react-query는 next-js에서 필요없을까? 하는 생각을 하게 됩니다.결론 부터 말하지만 역할은 축소됐지만 여전히 필요하다라고 말씀드리고 싶습니다. react-query는 클라이언트의 요청 서버 사이드의 요청은 next.js에서 처리할테니까요이 부분에 대해서 next.js의 data-fetching 파트에서도 다음과 같이 설명하고 있습니다swr 혹은 react-query를 이용해 클라이언트에서 ..
