2021-07-04 :: 로그인, 회원가입 만들기3

swr 활용법(optimistic ui)

revalidate()함수의 단점은 요청을 한번 더 보낸다. swr의 단점은 요청을 너무 많이 보낸다는 점. 그러므로 설정을 통해 요청을 조절해주어야 한다.

이 문제를 해결하기 위해 revalidate 대신에 사용하는 함수가 mutate이다.

revalidate는 서버에 다시 요청을 보내서 데이터를 받아온다. mutate는 서버에 요청 없이 값을 변환한다.

로그인 로그아웃 할 때 값을 불러오고 업데이트하는 과정을 최적화 해보자. 이미 있는 로그인 정보를 그대로 활용하고 싶으면 mutate를 사용한다. mutate는 기존에 있는 데이터를 이용.

mutate(res.data);

mutate의 두 번째 인자가 서버요청을 통해 데이터 검증여부에 대한 설정이다.

그렇다면 해당 설정이 가지는 의미는 무엇일까?

서버 요청 이전에 즉각적인 변경을 통해 사용자 경험을 높일 수 있다. (optimisic UI <==> passimistic UI)

해당 요청이 성공할 것이라 낙관하고 먼저 프론트 단의 데이터를 바꾼다.

기본 값이 passimistic UI이다. 이는 서버에 요청하고 반환받은 값을 토대로 데이터를 컨트롤 하는 것.

mutate import는 전역으로도 가능하고 useSWR의 반환값으로 사용도 가능하다. 전역으로 사용할 경우 경로를 따로 더 지정해주어야 한다.

useSWR의 3번째 인자에 설정을 넣는다. 설정 중 dedupongInterval은 이전 요청의 반환을 캐시에 저장해둔 뒤 해당 기간 안에 같은 요청이 발생하면 캐시에 있는 데이터를 그대로 이용해서 사용한다.

useSWR이 get요청 중심으로 돌아가긴 하는데, fetcherPost 같은거 정의해서 post처리해도 된다. 결국 요청의 종류보다는 데이터를 어떻게 처리하냐가 중요하다.

swr가 비동기 처리에만 사용하는 것이 아니다. 첫번째 인자도 반드시 api 경로를 넣을 필요가 없고 문자열을 넣어서 fetcher에서 인자로 받은 뒤 localStroage에 저장을 해도 상관이 없다.

swr로 전역데이터 관리하기. 다른 컴포넌트에서 첫 번째 인자에 같은 값을 넣은 뒤 useSWR를 사용하면 된다.

말단 컴포넌트에 memo잘 붙여서 최적화 한다. props에 많이 사용한다.

swr 사용할 때, 비동기 요청을 통해 데이터를 받은 뒤 가공해서 반환 해 주어도 된다. fetcher을 다양하게 사용할 수 있어야 한다.

같은 요청을 두 번 보내고 싶으면 path에 꼼수를 써서 두 번 보내면 된다. (사실 같은 경로로 하면 안되는 이유는 모르겠다. 아마 데이터를 따로 보관하기 위해서?)

path 뒤에 #이나 ?를 붙이고 다른 fetcher를 사용하면 된다.