왕가's history

Mutate mutate는 원격 데이터 및 캐싱된 값을 변경, 갱신하기 위해 사용됩니다. 다른 곳에서 해당하는 키값에 데이터를 post나 delete, patch 등 작업이 일어났을 경우, 캐싱된 데이터를 갱신해야 될 때 사용된다고 보면 됩니다. (revalidation) Global과 Bound 두 가지로 나눠져 있습니다. Global Mutate useSWRConfig 또는 swr을 import 해서 사용하게 됩니다. import { useSWRConfig } from "swr" function App() { const { mutate } = useSWRConfig() mutate(key, data, options) } /////////////////////////////////////// impor..

2023.07.03 - [Front-End/Library] - Library] SWR 저번 게시글에 이어서 SWR 여러 개념? 기능? 들을 설명하려고 합니다. 전역설정 만약 SWR을 사용하는데 fetcher가 중복된다면 고려해서 사용하면 좋을 듯한 기능입니다. import useSWR, { SWRConfig } from 'swr' function Dashboard () { const { data: events } = useSWR('/api/events') const { data: projects } = useSWR('/api/projects') const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // 오버라이드 // ... } funct..

SWR(Stale-While-Revalidate) swr은 데이터를 가져오기 위한 React hook 라이브러리로 보시면 됩니다. 서버에 GET요청을 하고, 결과를 받아와 간편하게 사용할 수 있습니다. 단순히 axios만 사용하는 것보다 효율이 좋다고 보시면 됩니다. 대표적인 특징으로 빠르고, 가볍고, 재사용이 가능한 데이터를 가져온다. 내장된 캐시 및 요청 중복을 제거 실시간으로 동작 3가지를 볼 수 있을 듯합니다. (저는 캐시 데이터를 사용하고, 중복으로 요청을 안 한다는 게 큰 장점으로 생각합니다.) 공식 홈페이지는 아래와 같습니다. https://swr.vercel.app/ko 설치 npm i swr yarn add swr 기본 구성 const { data, error, isLoading, isV..

useContext 개발하다 보면 props를 여러 번 넘길 때가 찾아오곤 합니다. 증조부모 → 조부모 → 부모 → 자식 → ... 이렇게 props를 계속 넘기다 보면 엄청난 노가다를 해야 될 수도 있고, 유지보수 측면, 가독성 등 안 좋은 점이 많습니다. 이를 개선하기 위해 전역적으로 데이터를 관리할 수 있는 Context를 사용하면 됩니다. Context를 사용하면 증조부모에서 자식까지 한 번에 데이터를 전달할 수 있습니다. (사용하기에 다른 hook보다 복잡할 수 있습니다.) createContext(initialValue) context객체 생성 createContext호출 시, Provider와 Consumer 반환 Context.Provider 생성한 context를 하위 컴포넌트에 전달 u..