SWR 2

useSWR 똑똑하게 사용하기 (2)

https://jjongsk.tistory.com/entry/useSWR-%EB%98%91%EB%98%91%ED%95%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 useSWR 똑똑하게 사용하기 useSWR이 좋은 라이브러리라고는 이미 널리 알려져 있음에도 불구하고 useSWR에 관련된 대부분의 글들에서 좀 더 다양하게 응용하여 사용하는 방법에 대해 다루는 경우는 많이 보지못했기에 가볍 jjongsk.tistory.com 추가)이 방식대로 코딩을 진행하다가 아주 큰 문제를 발견하였다. 일단 결론적으로 말하면 이러한 방식으로 swr을 사용하지 않는것이 좋다. 아래의 방식대로 swr을 사용하게 되면 해당 key와 일치하는 mutation을 동작하지 않게 해버리는 치명..

frontend 2023.01.14

useSWR의 3가지 hook들과 사용법

useSWR에는 크게 3가지의 hook들이 있다. useSWR useSWRInfinite useSWRImmutable(1.@ 버전부터 제공) useSWR은 Next.JS에서 csr로 페이지를 만들고자 할 때 없어서는 안될 hook이라고도 말할 수 있을 정도로 사용했을 때 얻는 퍼포먼스, 편의성이 엄청나게 크다. 먼저 useSWR은 유저가 페이지에 머물거나 다른 페이지에 있다가 페이지로 다시 돌아왔을때, 네트워크가 끊겼다가 다시 복구가 되었을 때 설정해놓은 key값으로 get요청을 보내 데이터를 다시 revalidate한다는 점이 핵심적인 feature라고 말할 수 있다. 이 때 data 값을 useSWR이 알아서 캐싱하게 되고 만약 새로 불러온 값이 기존에 캐싱된 값과 같다면 따로 component를 r..

frontend 2023.01.14