react-query (18) 썸네일형 리스트형 리액트 쿼리 : 쿼리 취소하기 쿼리 취소에 관하여: 직접 useFetch와 같은 훅을 구현할 경우, unmount된 경우에도 상태 설정 훅을 호출하여 개발 환경에서 오류 메세지를 마주치는 경우가 많죠. 즉, 보통은 요청을 일단 보내면 이후에 필요 없어져도 요청은 그대로 두고 응답받은 내용을 사용 안 하는 식으로만 구현합니다. React-Query와 같은 라이브러리를 사용하여도 해당 전략은 마찬가지입니다. ...기본적으로 프로미스가 리졸브되기 전에 마운트 해제되거나 사용되지 않는 쿼리는 취소되지 않습니다. 즉, 프로미스가 리졸브된 후 결과 데이터를 캐시에서 사용할 수 있음을 의미합니다. 이 동작은 쿼리 수신을 시작했지만 완료되기 전에 컴포넌트를 마운트 해제한 경우 유용합니다. 컴포넌트를 다시 마운트하였을 때, 쿼리가 아직 가비지 수집되.. 리액트 쿼리 : 리액트 라우터와 연계하기 리액트 쿼리와 리액트 라우터를 함께 효과적으로 사용하는 방법을 배워봅니다. 원문 링크입니다. https://tkdodo.eu/blog/react-query-meets-react-router React Query meets React Router React Query and React Router are a match made in heaven. tkdodo.eu Remix는 로더와 액션이라는 데이터 가져오기의 새로운 컨셉을 도입했습니다. 그리고 이 개념은 React Router 6.4 버전부터 순수한 CSR에서도 사용할 수 있게 되었습니다. URL 세그먼트, 레이아웃, 데이터는 좋은 짝꿍입니다. loader는 리액트 쿼리 등 데이터 가져오기를 url 단위로 캡슐화 해주는 요소입니다. action은 폼 제.. 리액트 쿼리 : 셀렉터와 폴더 구조 리액트 쿼리 셀렉터 실무 사용 경험, 폴더 구조에 대한 생각을 공유합니다. 리액트 쿼리 셀렉터 놀랍게도 리덕스처럼 리액트 쿼리에는 셀렉터가 있습니다. export const useTodosQuery = (select, notifyOnChangeProps) => useQuery(['todos'], fetchTodos, { select, notifyOnChangeProps }) 위와 같이 셀렉터를 파라미터로 받아 사용할 수 있도록 하는게 좋을까요? 결론은 아닙니다. 리액트 쿼리의 api 디자인은 실제로 리덕스의 영향을 꽤 많이 받았으며, 리덕스의 핵심 철학 중 하나는 함수형 프로그래밍 원리를 따르는 것입니다. 이를 고려하면 데이터의 모양을 캡슐화해야 합니다. 셀렉터 함수의 중복, 메모화, 데이터 캡슐화를.. React query의 tracked-query와 개방 폐쇄 원칙 https://github.com/TanStack/query/pull/1578 Feature/use tracked query by TkDodo · Pull Request #1578 · TanStack/query I made a first POC of what we discussed here: #1554 I tried it out in the simple example and it worked fine - just looks too easy to be true. Am I missing something obvious? Apart from: tests (no... github.com 리액트 쿼리에는 tracked-query라는 기능이 있습니다. 우리가 해당 기능이 있는지 없는지 아는가에 관계없이, 좌측 구.. 리액트 쿼리 : FAQ(자주 묻는 질문) 원문 : https://tkdodo.eu/blog/react-query-fa-qs React Query FAQs Answering the top 3 most frequently asked React Query questions tkdodo.eu 상당히 의역한 내용이라 본문과 다를 수 있습니다. (의미가 다르진 않을껍니다... 군복무 시절에도 토익 900은 넘었습니다...) Refetch에 파라미터 넘기기 불가능합니다. 이유는? : Refetch라 생각한 경우는 대부분 Refetch가 아닙니다. const { data, refetch } = useQuery(['item'], () => fetchItem({ id: 1 })) { // 🚨 this is not how it works refetch({ id: .. 리액트 쿼리 : 폼 원문 : https://tkdodo.eu/blog/react-query-and-forms form은 서버 상태와 클라이언트 상태의 경계가 모호지는 영역입니다. 해당 게시물에선 react-hook-form 과 React Query를 함께 사용하는 방법을 알아봅니다. Server State vs. Client State 서버 상태 대부분 비동기 대부분 스냅샷에만 접근 가능 대부분 우리가 소유하지 않은 상태 클라이언트 상태 완전히 제어할 수 있음 대부분 동기적 항상 정확한 값을 알 고 있음 간단한 접근 방법 저는 상태를 props에 넣거나, 다른 상태관리 도구로 상태를 복사하는 방법을 좋아하지 않습니다만, form은 예외가 될 수 있다고 생각합니다. 서버 상태를 초기값으로만 사용할 가능성이 높기 때문입니다. .. 리액트 쿼리 : 뮤테이션 원문 : https://tkdodo.eu/blog/mastering-mutations-in-react-query 리액트 쿼리 라이브러리 작업 대부분은 useQuery hook을 통한 데이터 검색에 관련한 것입니다. 그러나 데이터 작업에 두 번째로 필수적인 부분이 있습니다. 바로 업데이트입니다. 이 사용 사례의 경우 React Query는 useMutation hook을 제공합니다. 뮤테이션은 변형 > (서버 데이터 형태의 변경)으로 번역함. 4글자 다 적기도 귀찮고 의미도 애매한것 같아서... 변형(mutations)이 무엇인가요? 일반적으로 변형은 부작용이 있는 함수입니다. 예를 들어 Arrays의 push 메서드를 살펴보십시오. 값을 푸시하는 위치에서 배열을 변경하는 부작용이 있습니다. const m.. 리액트 쿼리 : 네트워크 오프라인 시 동작 원문 : https://tkdodo.eu/blog/offline-react-query 오타가 너무 많았어서 수정하였습니다. TL;DR : fetchStatus - 네트워크 연결 상태를 나타내는 횡단관심사 React Query는 비동기 상태 관리 도구 입니다. queryFn의 리턴값이 프로미스인 이상, 라이브러리는 동작합니다. 데이터가 어디에서 왔는지는 중요하지 않습니다. fetchStatus는 loading, sucess,error와 직교하는 또 다른 상태입니다. fetching: 쿼리가 실행중입니다 - 요청이 실행중입니다. paused: 쿼리가 실행되고 있지 않습니다 네트워크가 다시 연결될 때까지 쿼리가 일시 중지됩니다. idle: 쿼리가 현재 실행중이지 않습니다. v4의 기본 모드에서는 네트워크 연.. 이전 1 2 3 다음
