2022/06/17 (4) 썸네일형 리스트형 리액트 쿼리 : 렌더링 최적화 https://tkdodo.eu/blog/react-query-render-optimizations React Query Render Optimizations An advanced guide to minimize component re-renderings when using React Query tkdodo.eu isFetching transition 아래 예제는 길이가 변경되었을 때, 한번 렌더링 되지 않습니다. export const useTodosQuery = (select) => useQuery(['todos'], fetchTodos, { select }) export const useTodosCount = () => useTodosQuery((data) => data.length) functio.. 리액트 쿼리 : 서버 응답 변환 위치 원문 : https://tkdodo.eu/blog/react-query-data-transformations 어떤 방법이 가장 좋을까? 그때그때 다르다. - 모든 개발자, 항상 0. GraphQL 사용과 백엔드 개발자의 지원 우리가 할 일이 없음. 하지만 항상 가능한 것이 아님. 1. 쿼리 함수 안에서(queryFn) queryFn은 useQuery에 전달하는 함수입니다. Promise를 반환할 것으로 예상하고 결과 데이터는 쿼리 캐시에 저장됩니다. 이 함수가 항상 백엔드가 제공하는 구조로 데이터를 반환할 필요는 없습니다. const fetchTodos = async (): Promise => { const response = await axios.get('todos') const data: Todos .. 리액트 쿼리 : 반드시 알아야 하는 상식 https://tkdodo.eu/blog/practical-react-query Practical React Query Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful... tkdodo.eu 해당 게시물을 요약정리한 글임 리액트 쿼리와 서버 상태 Apollo Client는 서버 데이터와 서버 데이터 캐시를 이용한, 서버 사이드 상태 관리의 신기원을 열었음. 이는 수 많은 전역 상태의 클라이언트 측 (중복) 관리 부담을 줄여줬으나, GraphQL을 도입하기 위해선 백엔드의 조정이 가장 큰 장벽이었고, 오버페칭, 언더페칭을 포함.. useState에 대해 좀 더 잘 알아보기 #3: Things to know about useState #4: useState for one-time initializations 두 게시물을 짬뽕해서 정리함. 1. 함수형 업데이터 클로저를 사용하여 setState 함수를 호출할 시, 배치 처리되는것 같은 느낌을 줍니다. 이는 우리의 의도와 다를 수 있습니다. 함수형 업데이터는 매 setState호출마다 이전 호출 결과 상태를 사용할 수 있게 해줍니다. 기존 클로저를 사용한 업데이트 : 결과는 항상 1 증가합니다. function App() { const [count, setCount] = React.useState(0) return ( { setCount(count + 1) setCount(count + 1) }} > 🚨 This will not.. 이전 1 다음
