[Today I Learned] 12월 3주차 day1

⚠ 본 게시글은 react-query의 기본 개념만 다뤘습니다. 자세한 내용은 다루지 않고 키워드만 다뤘으니 자세한 내용을 원하시면 다른 게시글을 이용하세요.

react-query

React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다.(서버상태관리 라이브러리)

프론트엔드 생태계는 변화가 빠르고 굉장히 유행을 따른다. 그때그때 달라지는 만큼 항상 공부 할 마음가짐과 의지를 갖고있자.

사용이유

여러 라이브러리(redux , mobx,recoil) 들이 있지만 , 클라이언트 쪽의 데이터를 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어서 등장하였다.
react-query를 사용함으로 서버, 클라이언트 데이터를 분리한다.

ex)

• 클라이언트 쪽의 Data: input의 state등
• 서버 쪽의 Data: DB에서 가져온 데이터

Redux Middleware (Thunk, Saga, Observable) 등을 활용해서 서버 쪽의 데이터를 관리 할 수 있지만 단점이 있다. 단점들은 직접 구글링 "키워드 : 보일러 플레이트"

장점

• 캐싱
• get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행 )
• 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
• 동일 데이터 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능)
• 무한 스크롤 (Infinite Queries (opens new window))
• 비동기 과정을 선언적으로 관리할 수 있다.
• react hook과 사용하는 구조가 비슷하다

[참고자료]

react-query 사용하기