react-query React Query 사용해보기 복습도 해볼겸, 현재 진행 중인 프로젝트에 react query를 적용시켜, server state 를 관리 해보고자 한다. 현재 Next.js + TypeScript 를 사용하여 진행중인 프로젝트에 서버의 데이터를 가져오기 위하여 React Query 를 적용해 볼 것이다. 먼저 npm i react-query 를 통해 설치를 해준다. 최상단인 파일에 QueryClientProvider 를... Reactreact-queryReact React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest [React-Query] useQuery, useMutation 비동기 로직을 쉽게 처리할 수 있다. Global State (Client State) : Global Store에 정의되어 프로젝트 어디서나 접근할 수 있는 state 여러 컴포넌트에서 최신 데이터를 받아오려면, fetch를 그 수 만큼 수행해야 한다. 캐싱된 쿼리의 QueryKey와 동일한 요청을 하는 쿼리는 같은 것으로 인식하여 fetch하지 않고 캐싱된 쿼리 그대로 사용. 세 번째 인... react-queryreact-query [React.js] React Query fetching : 데이터 요청 상태 네트워크에서 데이터를 fetch 하고 A 라는 query key 로 캐싱함 만일 cacheTime 이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount 되면, fetch 가 실행되고, fresh 한 값을 가져오는 동안 캐시 데이터를 보여줌. 데이터가 한번 fetch 되고 나서 staleTime 이 지나지 않았다면, unmount 후 mount 되어도 fe... react-queryreact.jsreact-query React Query와 상태관리 (1) 상태를 관리하는 방법에 대한 것 -> 프로덕트가 커짐에 따라 어려움도 커짐 또, 반복되는 isFetching, isError 등 API 관련 상태 다른 사람들과 공유되지 않으며 Client 내에서 UI/UX 흐름이나 사용자 인터랙션에 따라 변할 수 있음 해답은 React Query ! React Query is often described as the missing data-fetching ... Reactreact-queryReact RQ - 23. Handling Mutation Response react-query를 통해서, post 요청을 보내고 응답받은 값을 화면에 보여주고자 할 때 아래와 같이 작업한다. 이 방법의 장점은 1번의 network 요청만 이루어진다는 것 이다. post 요청과 즉시에 get 요청을 하는 invalidateQueries과는 달리 setQueryData는 저장하고자 하는 값을 서버로 보냄과 동시에 react-query에서 캐싱하고 있는 값을 변경함으로... rqreact-queryreact-query RQ - 22. Query invalidation react-query를 통해서 post 요청을 보내고, response 를 처리하는 방식이다. 이 방식은 post 요청이 성공했을 때, 바로 같은 key 가진 get 요청을 보냄으로써 서버와 클라이언트의 싱크를 일치시킨다. 그래서 network 요청이 2번 발생한다.useQueryClient 의 invalidateQueries를 사용한다. useAddCard.ts (hook) 만든 훅은 po... rqreact-queryreact-query [초보자용] React Query로 Qita API 두드리기. 개인적으로 최근 화제가 된 리액트 큐리에 대해 입문을 시도해보고 싶어 도입과 함께 기사를 썼다. 개인적으로 쓴 화제도 이유가 있는데, npm trends를 보면 올해 1월께부터 급격히 늘어나기 시작했다. 이 글을 본 필자는 깜짝 놀라 지금 쓰고 있다. 출전: 글을 가져오고 표시할 화면을 만들었습니다! 가져올 때 이번에는 다음과 같은 조건에 따라 진행할 것이다 React FW: Next.js ... next.jsReactreact-query 1.6 React masterClass (CoinStore 마무리) 이제 coin page에서 nesting router로 탭을 구현하고 그 안에서 chart를 보여줄 것이다. 먼저 Coins, Coin을 만들어준 것과 같이 coin.tsx안에 chart, price 라우터와 들어갈 수 있는 링크를 만들어준다. 이제 coin안에 router를 만들었으니 각각 componenet에 data를넣어줄 것이다. 에서 data를 받아온다 여기서 넘겨주는 data는 와... Recoilreact-queryjsstyled componentapexchartstsRecoil
React Query 사용해보기 복습도 해볼겸, 현재 진행 중인 프로젝트에 react query를 적용시켜, server state 를 관리 해보고자 한다. 현재 Next.js + TypeScript 를 사용하여 진행중인 프로젝트에 서버의 데이터를 가져오기 위하여 React Query 를 적용해 볼 것이다. 먼저 npm i react-query 를 통해 설치를 해준다. 최상단인 파일에 QueryClientProvider 를... Reactreact-queryReact React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest [React-Query] useQuery, useMutation 비동기 로직을 쉽게 처리할 수 있다. Global State (Client State) : Global Store에 정의되어 프로젝트 어디서나 접근할 수 있는 state 여러 컴포넌트에서 최신 데이터를 받아오려면, fetch를 그 수 만큼 수행해야 한다. 캐싱된 쿼리의 QueryKey와 동일한 요청을 하는 쿼리는 같은 것으로 인식하여 fetch하지 않고 캐싱된 쿼리 그대로 사용. 세 번째 인... react-queryreact-query [React.js] React Query fetching : 데이터 요청 상태 네트워크에서 데이터를 fetch 하고 A 라는 query key 로 캐싱함 만일 cacheTime 이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount 되면, fetch 가 실행되고, fresh 한 값을 가져오는 동안 캐시 데이터를 보여줌. 데이터가 한번 fetch 되고 나서 staleTime 이 지나지 않았다면, unmount 후 mount 되어도 fe... react-queryreact.jsreact-query React Query와 상태관리 (1) 상태를 관리하는 방법에 대한 것 -> 프로덕트가 커짐에 따라 어려움도 커짐 또, 반복되는 isFetching, isError 등 API 관련 상태 다른 사람들과 공유되지 않으며 Client 내에서 UI/UX 흐름이나 사용자 인터랙션에 따라 변할 수 있음 해답은 React Query ! React Query is often described as the missing data-fetching ... Reactreact-queryReact RQ - 23. Handling Mutation Response react-query를 통해서, post 요청을 보내고 응답받은 값을 화면에 보여주고자 할 때 아래와 같이 작업한다. 이 방법의 장점은 1번의 network 요청만 이루어진다는 것 이다. post 요청과 즉시에 get 요청을 하는 invalidateQueries과는 달리 setQueryData는 저장하고자 하는 값을 서버로 보냄과 동시에 react-query에서 캐싱하고 있는 값을 변경함으로... rqreact-queryreact-query RQ - 22. Query invalidation react-query를 통해서 post 요청을 보내고, response 를 처리하는 방식이다. 이 방식은 post 요청이 성공했을 때, 바로 같은 key 가진 get 요청을 보냄으로써 서버와 클라이언트의 싱크를 일치시킨다. 그래서 network 요청이 2번 발생한다.useQueryClient 의 invalidateQueries를 사용한다. useAddCard.ts (hook) 만든 훅은 po... rqreact-queryreact-query [초보자용] React Query로 Qita API 두드리기. 개인적으로 최근 화제가 된 리액트 큐리에 대해 입문을 시도해보고 싶어 도입과 함께 기사를 썼다. 개인적으로 쓴 화제도 이유가 있는데, npm trends를 보면 올해 1월께부터 급격히 늘어나기 시작했다. 이 글을 본 필자는 깜짝 놀라 지금 쓰고 있다. 출전: 글을 가져오고 표시할 화면을 만들었습니다! 가져올 때 이번에는 다음과 같은 조건에 따라 진행할 것이다 React FW: Next.js ... next.jsReactreact-query 1.6 React masterClass (CoinStore 마무리) 이제 coin page에서 nesting router로 탭을 구현하고 그 안에서 chart를 보여줄 것이다. 먼저 Coins, Coin을 만들어준 것과 같이 coin.tsx안에 chart, price 라우터와 들어갈 수 있는 링크를 만들어준다. 이제 coin안에 router를 만들었으니 각각 componenet에 data를넣어줄 것이다. 에서 data를 받아온다 여기서 넘겨주는 data는 와... Recoilreact-queryjsstyled componentapexchartstsRecoil