본문 바로가기

Hook4

Stop Using useMemo Now 원문: https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70 번역: https://velog.io/@lky5697/stop-using-usememo-now 을 읽고 재정리하였습니다. useMemo 란 useMemo 는 알다시피 계산결과를 memorization (유사하게, 기억한다 라고 생각하자.) 한다. const result = useMemo(() => { // running.... return value }, [deps]) 코드가 위와 같을 때, deps 로 들어온 state 값에 따라 side effect 로 useMemo 안의 로직이 실행되고 그 결과값을 리턴하게 된다. deps 의 값에 따라 리턴되는 value 값이 다를.. 2023. 4. 18.
[SWR] SWR 동작 시나리오 https://swr.vercel.app/ko/docs/advanced/understanding Understanding SWR – SWR SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. swr.vercel.app 최근에 swr 이해 문서가 업데이트 되었다. 일부 내용을 한번 살펴보자 useSWR 은 data,error,isLoading..및 stateful한 값을 반환합니다. 이러한 값들을 반환하는 시나리오를 설명합니다.. 2023. 3. 22.
[SWR] useSWR 장점 https://swr.vercel.app/ko 현재 우리 프로젝트에서 쓰고있는 data fetch react hook. 도입되자마자 구현하느라, 공부해볼 시간이 없었다. 이참에 정리해보고자 한다. 장점 1. Cache Stale-While-Revalidate 의 줄임말로 백그라운드에서 캐시를 revalidate(재검증) 하는 동안에 기존의 캐시 데이터를 화면에 보여준다. 그래서, 도중에 api가 에러를 반환하더라도 캐시된 데이터를 활용할 수 있다. 즉, 좋지않은 데이터로 인해 일어나는 불필요한 렌더링을 막아준다. 2. 중복제거 불필요한 api 호출을 막음 SWR은 전역캐시를 이용해 모든 컴포넌트 사이에 데이터를 저장하고 공유한다. 그러므로, 불필요한 네트워크 요청을 생략한다. user 정보를 가져오는 h.. 2023. 3. 22.
useMemo가 성능에 미치는 영향 해당 게시글은 아래 아티클을 읽고 정리하였습니다. https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/should-you-really-use-usememo.md GitHub - yeonjuan/dev-blog: 개발 블로그, 공부한거 정리 개발 블로그, 공부한거 정리. Contribute to yeonjuan/dev-blog development by creating an account on GitHub. github.com 1. useMemo 리액트에서 제공하는 hook 중 하나. 리액트 공식문서에 useMemo 의 설명을 보면, 개발자가 정한 dependcies 가 변경되면 로직을 실행하고 리턴되는 값을 캐시한다. Returns a memoiz.. 2023. 3. 21.
728x90
반응형