전체 글 (215) 썸네일형 리스트형 [번역] Why You Need React Query https://tkdodo.eu/blog/why-you-want-react-query Why You Want React QueryLet's take a look at why you'd want a library like React Query, even if you don't need all the extra features it provides...tkdodo.eu 저는 React 애플리케이션에서 비동기 상태와 상호 작용하는 방식을 간소화하는 React Query를 좋아합니다. 그리고 많은 동료 개발자들도 같은 생각을 하고 있다는 것을 알고 있습니다. 하지만 가끔 서버에서 데이터를 가져오는 것과 같은 간단한 작업에는 필요하지 않다고 주장하는 게시물을 보게됩니다. React Query가 제공하는 모든 추.. [번역] Preserving and Resetting State https://react.dev/learn/preserving-and-resetting-state Preserving and Resetting State – React The library for web and native user interfaces react.dev 상태는 컴포넌트간에 격리된다. React는 UI 트리에서 어떤 컴포넌트가 어떤 상태에 속하는지를 추적한다. 언제 상태를 보존할지, 언제 리렌더링할지 제어할 수 있다. State is tied to a position in the render tree React는 UI 컴포넌트 구조에 대한 렌더 트리를 빌드한다. 컴포넌트 state를 전달할 때, state가 컴포넌트 내부에 "존재"한다고 생각할 수 있다. 하지만 state는 실제로 Reac.. [번역] Making magic: Reimagining Developer Experience for the World of Serverless https://blog.cloudflare.com/making-magic-reimagining-developer-experiences-for-the-world-of-serverless Making magic: Reimagining Developer Experience for the World of Serverless Today I’m going to talk about TTFD, or time to first dopamine, and announce a huge improvement to the Workers development experience — wrangler dev. blog.cloudflare.com 이번 주에는 전 세계 200개 이상의 도시에서 콜드 스타트 없이 lightweight iso.. [번역] Relay Docs https://relay.dev/docs/ Home | Relay Relay documentation landing page relay.dev Relay는 GraphQL로 데이터를 가져오고 업데이트할 수 있는 React용 데이터 관리 라이브러리이다. 기본적으로 뛰어난 성능을 제공하면서 코드의 안정성과 유지보수를 유지하기 위한 수년간의 학습을 구현한다. Relay는 데이터 불러오기에 React 컴포넌트의 composability를 제공한다. 각 컴포넌트는 자체적으로 필요한 데이터를 선언하고, Relay는 이를 효율적인 pre-load 쿼리로 결합한다. 설계의 모든 측면은 컴포넌트를 작성하는 자연스러운 방식이 가장 성능이 좋도록 하는 것이다. Features - 선언적 데이터: 각 컴포넌트에 필요한 데이터를.. [번역] The Query Options API https://tkdodo.eu/blog/the-query-options-api The Query Options API v5 brought a new, powerful API, especially if you're using React Query with TypeScript... tkdodo.eu 약 3개월 전에 React Query v5가 출시되었고, 라이브리리 역사상 가장 큰 '획기적인' 변화가 있었다. 이제 모든 함수는 여러개의 인수가 아닌 하나의 객체만 전달받는다. 이 객체는 쿼리를 만드는데 필요한 모든 옵션이 포함되어 있으므로 쿼리 옵션이라고 부른다. - useQuery( - ['todos'], - fetchTodos, - { staleTime: 5000 } - ) + useQuery({ + q.. [번역] Optimistic Updates https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates Optimistic Updates | TanStack Query Docs tanstack.com React Query는 mutation이 완료되기 전에 UI를 낙관적으로 업데이트하는 두가지 방법을 제공한다. onMutate 옵션을 사용하여 캐시를 직접 업데이트하거나, 반환된 변수를 활용하여 useMutation 결과에서 UI를 업데이트할 수 있다. Via the UI 이것은 캐시와 직접 상호작용하지 않기 때문에 더 간단한 변형이다. const { isPending, submittedAt, variables, mutate, isError } = useMutatio.. [번역] useSyncExternalStore useSyncExternalStore – React The library for web and native user interfaces react.dev useSyncExternalStore는 외부 스토어를 구독할 수 있는 리액트 훅이다. const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) 컴포넌트의 최상위 레벨에서 (훅의 조건) useSyncExternalStore를 호출하여 외부 데이터 스토어에서 값을 읽을 수 있다. import { useSyncExternalStore } from 'react'; import { todosStore } from './todoStore.js'; function TodosAp.. [번역] React Query and React Context React Query and React Context Can it make sense to combine React Query with React Context ? Yes, sometimes ... tkdodo.eu React Query의 가장 큰 특징 중 하나는 컴포넌트 트리에서 원하는 곳 어디에서나 쿼리를 사용할 수 있다는 것입니다. 아래의 ProductTable 컴포넌트는 필요한 데이터를 fetch하고 이를 필요한 곳에 co-locate 시킵니다. function ProductTable() { const productQuery = useProductQuery() if (productQuery.data) { return ... } if (productQuery.isError) { return } re.. 이전 1 2 3 4 ··· 27 다음
