2022/06/19 (4) 썸네일형 리스트형 리액트 쿼리 : 상태 관리 라이브러리 원문 보기 : https://tkdodo.eu/blog/react-query-as-a-state-manager React Query as a State Manager Everything you need to know to make React Query your single source of truth state manager for your async state tkdodo.eu TL;DR 리액트 쿼리는 데이터 페치 라이브러리가 아니라, 상태관리 라이브러리 입니다. 비동기 상태 관리 도구 React Query는 비동기 상태 관리자입니다. Promise를 리턴하는 한, 모든 형태의 비동기 상태를 관리할 수 있습니다. QueryKey를 통해 해당 상태를 식별하며, 데이터 페칭을 추상화합니다. export c.. 리액트 쿼리 : 초기값과 플레이스홀더 원문 보기 : https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query 대부분의 경우 우리(및 사용자)는 성가신 로딩 스피너를 싫어합니다. 그들은 때때로 필요하지만 우리는 여전히 가능하면 피하고 싶습니다. React Query는 이미 많은 상황에서 이를 제거할 수 있는 도구를 제공합니다. 백그라운드 업데이트가 진행되는 동안 캐시에서 오래된 데이터를 가져오고, 나중에 필요하다는 것을 알면 데이터를 미리 가져올 수 있으며 - prefetch data 쿼리 키가 변경되어 하드 로딩 상태를 피하기 위해 이전 데이터를 유지할 수도 있습니다. - keep previous data 또 다른 방법은 우리의 사용 사례에 적합할 것으로 생각되는 데이터로 캐시를.. 리액트 쿼리 : Query Function Context로 queryFn 타이핑 원문 : https://tkdodo.eu/blog/leveraging-the-query-function-context 요점 인라인 함수를 사용하지 마세요. Query Function Context를 활용하세요. 객체 키를 생성하는 쿼리 키 팩토리를 사용하세요. 들어가며 인라인 queryFn 예제를 살펴봅시다 type State = 'all' | 'open' | 'done' type Todo = { id: number state: TodoState } type Todos = ReadonlyArray const fetchTodos = async (state: State): Promise => { const response = await axios.get(`todos/${state}`) return respo.. 리액트 쿼리 : 쿼리키 원문 : https://tkdodo.eu/blog/effective-react-query-keys 쿼리 키 라이브러리가 내부적으로 데이터를 올바르게 캐시하기 위해 필요합니다. 쿼리 종속성이 변경될 때 자동으로 다시 가져올 수 있도록 하기 위해 필요합니다. 쿼리 캐시와 수동으로 상호 작용할 수 있도록 해줍니다. 변이(뮤테이션) 후 데이터를 업데이트하거나 일부 쿼리를 수동으로 무효화해야 하는 경우와 같이 필요할 때 데이터 캐싱 내부적으로 쿼리 캐시는 단지 자바스크립트 객체입니다. 키는 직렬화된 쿼리키이며 값은 메타 정보가 추가된 쿼리 데이터입니다. 키는 결정적인 방식(deterministic way)으로 해시되므로 객체도 사용할 수 있습니다. 최상위 수준에서 키는 문자열 혹은 배열이어야 하며, 일반 객체의 .. 이전 1 다음
