본문 바로가기

2022/06/20

(4)
리액트 쿼리 : 폼 원문 : 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의 기본 모드에서는 네트워크 연..
리액트 쿼리 : 에러 처리 https://tkdodo.eu/blog/react-query-error-handling React Query Error Handling After covering the sunshine cases of data fetching, it's time to look at situations where things don't go as planned and "Something went wrong..." tkdodo.eu 서론 리액트 쿼리는 비동기 상태 관리 라이브러리입니다. 오류 처리는 비동기적 데이터 가져오기 작업의 필수적인 부분입니다. 모든 요청이 성공하는 것은 아니며 모든 프로미스가 fullfilled되는 것도 아닙니다. 우리는 보통 처음에 성공을 가정하고 구현합니다. 그러나 에러를 처리하는 방법에 대해..