react-query 의 미래

1. 리액트 쿼리는 앞으로 어떻게 될까요?

최근 많은 컨퍼런스와 기술블로그에서 redux와 saga를 리액트 쿼리로 전환한 경험을 공유하고 있는데요. redux와 saga의 불편함과 복잡함에 비하면 리액트 쿼리는 훨씬 사용이 간편하고 캐싱과 같은 편리한 기능 때문에 그러한 내용들에 공감이 많이 됩니다. 하지만 리액트와 nextjs의 최신 버전을 보면 서버 사이드에서 데이터를 가져오는 방향으로 컴포넌트가 발전하고 있고 데이터 호출에 대한 캐싱도 제공하고 있습니다. 앞으로 이러한 기능이 점점 안정화가 된다면 유저정보와 같은 사용자만의 데이터 외에는 클라이언트 사이드에서 데이터 호출은 많이 줄어들 것으로 보이고 이 마저도 새롭게 나오는 use() 훅을 사용해볼 수 있을 것 같아서요 분명 서버데이터에 대한 상태관리 도구로 redux와 saga의 대안이 필요한건 맞지만 지금 시점에서 리액트 쿼리를 도입하는게 맞을지 고민이 되기도 합니다. 다른 개발자 분들은 어떻게 생각하시는지 궁금합니다!

답변

안녕하세요! 개인적으로 react-query가 최근에 떠오른 이유는 같은 문제를 다르게 풀었기 때문이라고 생각해요. 기존에는 서버/UI 상태 관리를 전역 상태 관리 툴에서 같이했다면, react-query는 서버 상태만을 위한 스토어에 여러가지 기능을 추가해서 사용하는 방식이죠. 캐싱, 로딩, 에러 처리, 리패칭 등 귀찮은 일을 대신 해주고, 쓰기 쉬웠던게 react-query를 많이 사용하는 이유라고 생각됩니다. 질문자님이 생각하시는 것처럼 미래에 서버 컴포넌트가 안정적으로 운영되기 시작하면 react-query가 내세우는 서버 상태 관리의 많은 부분을 대체할 수 있지 않을까 생각되네요. 하지만, 기존 레거시를 react 18로 올려서 서버 컴포넌트를 사용하는 것은 쉽지 않을 것 같습니다. 서버 컴포넌트라는 개념이 없던 시절에 짠 코드 베이스를 변경하는 작업은 상당히 까다로울 것 같아요. 기존에 react를 설계하고 짜왔던 방식을 조금 다르게 접근해야되니 개발자들이 습득하는데 시간이 걸릴 것 같기도 하구요. 결국, 기존 레거시가 react 18을 느리게 도입할수록 레거시에서 쓰던 react-query도 계속 사용되지 않을까 싶습니다. 저도 궁금한 주제네요 ㅎㅎ 참고했던 글들 링크 첨부할게요 - https://tech.kakaopay.com/post/react-server-components/ - https://beta.nextjs.org/docs/rendering/server-and-client-components - https://www.plasmic.app/blog/how-react-server-components-work#the-high-level-picture - https://www.youtube.com/watch?v=TQQPAU21ZUw

2. React 18의 서버 컴포넌트가 활성화 되면 react-query는 사라질까요?

React 18에 새로 도입된 Server Component는 서버에서 렌더링되며 데이터 베이스에도 직접 접근할 수 있다고 합니다. 서버에서 렌더링되고, 직접 DB의 값을 fetching한다면 앞으로 react-query를 사용할일이 없어지는 걸까요? 앞으로 Server Component가 바꿀 프론트엔드 생태계가 궁금해지네요.

답변

둘의 역할이 달라서 리액트 쿼리가 사라질 것 같진 않습니다. 리액트 쿼리는 주기적 폴링, 데이터 캐싱 등 클라이언트 사이드에서 유용한 기능을 제공해주고 있기 때문에 서버 컴포넌트가 이런 역할을 대체하기 쉽지 않을 것 같아요. 또한 갑자기 서버 컴포넌트에 최적화된 어플리케이션 구조를 설계할 수 없고, React 17버전 프로젝트도 많기 때문입니다. 하지만 서버 컴포넌트는 어떤 방향으로 발전할지 모르고, 캐싱과 같은 react-query의 부분적인 기능을 대체한다면 리엑트 쿼리의 역할이 점차 축소하지 않을까요?

3. next.js swr vs react-query 어떤 라이브러리를 선택해야 할까요?

안녕하세요, next.js로 처음 프로젝트 시작하는 초보 개발자입니다! 지금까지 React로만 개발해오고 상태관리 라이브러리는 Redux만 사용해봐서 이번에 새로운 라이브러리를 사용해보려고 합니다. next.js에서는 swr이나 react-query를 자주 사용한다고 하는데 어떤걸 쓰면 좋을까요? 장단점이나 여러가지 알려주시면 감사하겠습니다🙌

답변

저는 보통 라이브러리 선택시에 다음 조건을 고려합니다. 1. 사용하는 사람이 많고 유지보수가 잘 되고 있는지 2. 작업자에게 익숙한지 3. 구현할 프로젝트에 필요한 기능이 있는지, 성능, 용량 1. 사용하는 사람이 많고 유지보수가 잘 되고 있는지 react-query와 swr npm 트렌드는 50만 다운로드 정도 차이나네요! https://npmtrends.com/react-query-vs-swr swr은 4월 11에 최신 업데이트됐고 react-query는 2일 전입니다. 우선 두 라이브러리다 업데이트가 잘 되고, 많이 사용되고 있는 것 같습니다. 2. 작업자에게 익숙한지 질문자 분께서 두 라이브러리 모두 처음 사용해본다고 하셨으니 같은 조건인 것 같습니다. 3. 구현할 프로젝트에 필요한 기능이 있는지, 용량, 성능 용량: 번들사이즈는 swr이 더 가볍다고 합니다. 성능: swr을 깊게 사용해본적이 없어서 기능 비교는 어렵지만 https://blog.logrocket.com/swr-vs-tanstack-query-react/ 이 블로그를 참고해봤을 때 swr: 가벼운 사이즈로 React 요청 처리에서 캐싱 문제를 해결하기 위한 최소한의 API를 제공. react-query: swr과 동일한 문제를 해결하지만 더 고도화된 기능 제공. 개인적으로는 둘다 사용해보시고 프로젝트에 필요한 기능들을 비교한 뒤 선택하는 것 추천드려요!