React (34) 썸네일형 리스트형 [React Design] HOC Pattern 고차 컴포넌트 패턴 1. 고차 컴포넌트 정의 자바스크립트는 함수형 프로그래밍이 특징인 언어입니다.그 중에서 함수를 값처럼 인자를 받아 함수를 리턴하는 함수를 고차 함수라고 합니다. 고차 컴포넌트( HOC )도 이와 비슷한 개념 입니다.단지 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 차이가 있다고 보시면 됩니다. 그리고 이 리턴하는 새로운 컴포넌트는고차 컴포넌트의 기능을 래핑하여 기능 + 인자 컴포넌트를 반환하는 차이가 있을 뿐입니다. function withStyles(Component) { return props => { const style = { padding: '0.2rem', margin: '1rem' } return }}const Button = () = Click me!const Text.. [TanStack Query / React Query] Optimistic Updates ( 낙관적 업데이트 ) : UI 방식과 캐시 방식 https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식 문서를 번역 정리한 글 입니다. 낙관적 업데이트는 mutation 이 성공적으로 반영될 것이라 낙관적으로 판단을 하고서버로 부터 응답이 오기 전에 UI 업데이트를 먼저 하는 것을.. [TanStack Query / React Query] setQueryData : Mutation 응답으로부터의 업데이트 https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식 문서를 번역한 글입니다. Mutation 응답으로부터의 업데이트 서버의 객체를 업데이트하는 mutation을 다룰 때, 새로운 객체가 일반적으로 mutati.. [TroubleShooting / React Query] React Query와 React Infinite Scroller 연동 시 중복 호출 문제 해결하기 react infinite scroller 라이브러리에는 initialLoad 속성이 true 로 기본 설정이 되어있습니다. react query 와 함께 사용할 경우, 1. 첫 페이지 데이터를 react query 가 가져오게 되고2. InfiniteScroll 컴포넌트는 자신의 관점에서는 아직 아무 데이터도 로드하지 않았다고 판단 3. initialLoad={true}이므로 자동으로 loadMore(fetchNextPage) 실행4. 다음 페이지인 2번째 페이지를 InfiniteScroll 과 react query 가 별도로 호출하게 됩니다 initialLoad 속성을 false 로 설정하면 기존의 이중 호출 현상이 사라지게 됩니다. [TanStack Query / React Query] useInfiniteQuery와 무한 스크롤 useInfiniteQuery는 페이지네이션이나 무한 스크롤과 같은 데이터 로딩을 구현할 때 사용됩니다. 1. useQuery 와 useInfiniteQuery의 차이 ● useQuery단일 데이터 객체 반환 한 번의 요청에 대한 응답만 저장 ● useInfiniteQuerypages 배열: 모든 페이지의 데이터를 순서대로 저장 pageParams 배열: 각 페이지를 가져올 때 사용된 매개변수 저장 여러 페이지의 데이터를 누적하여 저장 좀 더 이해하기 쉽게 data에 로그를 찍어보면 useQuery 와 uesInfiniteQuery 의 반환되는 data 의 구조는 다음과 같은 차이가 있습니다 1-1. useQuery const { data } = useQuery({ queryKey: ['i.. [TanStack Query / React Query] prefetchQuery : 데이터 선제적 로딩 이전 토이 프로젝트에서는 react-router 와 함께 사용하여loader 를 이용하여 페이지가 열리기 전, 사전에 데이터를 가져오는 방법을 사용했었지만순수하게 TanStack Query 를 사용하여 사전에 데이터를 가져오는 방법을 찾아보았습니다. prefetchQuery & prefetchInfiniteQuery https://tanstack.com/query/latest/docs/framework/react/guides/prefetching#prefetchquery--prefetchinfinitequery TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for c.. [React] Redux에서 비동기 작업 처리하는 3가지 방법 Redux 의 Reducers 함수는 다음과 같은 조건이 있습니다.순수함수여야 하며, 사이트 이펙트에 영향을 받지 않아야 하고, 동기적인 코드여야만 한다는조건이 바로 그것입니다. 이는 react 의 useReducer 함수도 같은 조건입니다.그럼 Redux 사용시, 이런 비동기 코드는 어디에서 작성해야하는 걸까요? 3가지 방법이 있습니다. 1. 컴포넌트 내에 useEffect() 함수를 사용하여 직접 정의2. 사용자 정의 action 을 사용( 커스텀 액션 생성자 (Thunk) )3. createAsyncThunk 사용( redux toolkit 만 가능) 1. 비동기 코드 예시 1-1. 컴포넌트 내에 useEffect() 함수를 사용하여 직접 정의const Component = () => { c.. [React] Redux: App-Wide State와 Cross-Component State 관리 가이드 1. Redux 상태 관리의 기본 개념 client state( 웹 브라우저 세션과 관련된 모든 정보) 는 사용 범위에 따라 3가지로 나뉩니다 1. local state 2. cross-component state3. app-wide state 1.1. Local State (지역 상태) 단일 컴포넌트 내에서만 사용되는 상태 useState, useReducer 훅을 사용하여 관리 폼 입력 상태토글 상태 (열기/닫기) UI 상태function Component() { const [isVisible, setIsVisible] = useState(false); // 이 상태는 이 컴포넌트 내에서만 사용됨} 1.2. Cross-Component State (교차 컴포넌트 상태) 여러 컴포넌트 간에 공.. 이전 1 2 3 4 5 다음
