루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

API 콜은 네트워크 비용을 지불한다. 의도치 않게 불필요한 API 콜은 서버의 부하도 증가시켜 필요한 응답의 시간을 증가시킨다. 비용 지불 관점 외에도 앱의 응답 속도가 저하되어 UX도 악화될 수 있다. swr은 기본적으로 hook 내에서 마운트 되거나 focus되면 API를 실행시킨다.사실 컴포넌트를 마운트한 이후에 필요에 따라서만 업데이트 해도 좋다. 자주 변하지 않는 값의 경우 앱을 킨 후, 한번만 사용하여 캐싱된 값만 사용할 수도 있고어떤 화면은 포커싱될 때마다 일정 주기마다 업데이트 되길 기대할 수 있다. 즉, 마운트될 때마다 실행될 필요가 있는지, 포커싱될 때마다 실행될 필요가 있는지를 검토해주면 좋다.  SWR은 revalidatieOnMount와 revalidatieOnFocus 옵션을 ..

앱 내에 당겨서 새로고침 기능을 구현해야될 일이 생겼다. 보통 당겨서 새로고침 기능은 상위 컴포넌트에서 UI로 노출될 일이 많다. 그러나 상위에서 모든 함수를 다 선언해서 하위로 props drilling을 해버리면 재렌더도 많아지고 부하가 커진다.  그렇기때문에 구현할 수 있는 여러 방법들이 있다. 1. 상위에서 함수 구현체 정의해놓고, 하위에서 함수 set하여 상위에서 실행시키기이 방법은 어쩔 수 없이 구현체를 모두 props drilling을 하고, 리렌더 방지를 위해 ref로 감싸서 하위 컴포넌트에서 업데이트 함수를 set하는 방법이다. 이 방법의 장점은 상위 컴포넌트에서는 하위 컴포넌트에서 정해준 함수만 실행시키면 된다. type UpdateFunc = (() => void) | undefine..

https://swr.vercel.app/ko/docs/getting-starteduseSWR을 사용해서 데이터를 패칭하다보면 isLoading, isValidating이라는 걸 마주할 수 있다.이를 활용하여 UI를 훨씬 더 센스있게 구현할 수 있다. (상황에 맞는 로딩 스켈레톤 적용할 수 있음)이걸 이해하기 전에 SWR의 state machine 주기를 이해할 필요가 있다.  SWR은 아래 상황에 따라 isLoading과 isValidating은 여러 의미를 가진다.  1) 변하는 key가 없을 때 변하는 key가 없다면 isLoading은 첫 로드를 의미하며, isValidating은 mutate를 시킬 때만 true/false가 변환된다.이를 UI로 활용해보면, 첫 로드는 isLoading으로 is..

여러 API 결과를 바탕으로 데이터를 표현해야할 때가 있다.  내가 작업하는 앱의 경우, 여러 투자 자산 상품들을 보여주고 그에 맞는 총 투자액과 총 투자 이익을 보여주어야 했다. API로 데이터를 나타내는 방법은 여러가지가 있겠지만, SWR을 활용하여 나타내는 방법을 알아보겠다.import useSWR from 'swr' function Profile () { const { data, error, isLoading } = useSWR('/api/user/123', fetcher) if (error) return failed to load if (isLoading) return loading... // 데이터 렌더링 return hello {data.name}!}  아래는 SWR을 활용한 기..