분류 전체보기 (214) 썸네일형 리스트형 [번역] 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.. [번역] Type-safe React Query Type-safe React Query About the difference between "having types" and "being type-safe"... tkdodo.eu 타입스크립트를 사용하는 것이 좋은 생각이라는 것에 모두 동의할 것입니다. 타입 안전을 싫어하는 사람이 있을까요? 버그를 조기에 발견할 수 있는 좋은 방법이며, 앱의 일부 복잡성을 type 정의로 풀어낼 수 있으므로 머릿속에 영원히 보관할 필요가 없습니다. 타입 안정성의 수준은 프로젝트마다 크게 다를 수 있습니다. 결국 TS 설정에 따라 모든 유효한 JavaScript 코드가 유효한 TypeScript 코드가 될 수 있습니다. 또한 '타입이 있다는 것'과 '타입 안전하다는 것' 사이에는 큰 차이가 있습니다. 타입스크립트의 강력한.. 이전 1 2 3 4 ··· 27 다음
