인프런 커뮤니티 질문&답변
작성한 질문수
swr 설정 살펴보기 > revalidate 문제
작성
·
762
1
swr 최신버전에서 revalidate가 삭제 된 것 같아서 질문드립니다!
제로초님의 강의를 듣고, 제가 이해한 것은, 기본 swr설정으로 사용을 하면, 지속적으로 데이터를 요청하게 되는데, swr에서 revalidate를 설정해주고, onSubmit의 post의 then에 reavalidate함수를 넣어주면, 그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다.
swr 공식문서를 읽어보긴 했는데 확실히 이해가 되지 않아서요.. 조건부로 실행시키기 위해서, useSWR()에서 조건을 주어, 조건에 따라 false일 때 url의 위치에 null 안에 조건을 넣어주는 방식으로 공식 문서에 적혀있는데, 이렇게 되면 useState로 조건을 하나 만들어주어야 할까요? 해당 방법이 맞는지와 올바른 코드 예시가 있다면 알려주시면 감사하겠습니다!! ㅠ
답변 1
1
그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다.
아닙니다. swr은 컴포넌트가 마운트될 때부터 작동합니다. revalidate는 단지 수동으로 데이터를 갱신할 뿐입니다.
조건부로 하려면 useState로 조건을 만들어주어야 합니다. 그 state(조건)이 바뀌면 알아서 swr도 데이터를 업데이트합니다.
const [cond, setCond] = useState();
const { data } = useSWR(cond ? '주소' : null, fetcher)
아뇨. SWR을 아예 잘못 이해하셨습니다. SWR은 알아서 요청을 보내는 것이고, 컴포넌트가 마운트 될 때부터 요청을 보냅니다. 자동으로 요청을 주기적으로 보내는 것이고, revalidate, mutate는 수동으로 요청을 다시 보낼 수 있는 거였습니다.
기존에도 로그인 전부터 유저 정보 api를 호출하고 있습니다. 그 때 호출할 때는 로그인 안 했으니 false가 응답이 오겠죠. 그리고 저희가 로그인 요청을 했으니 유저 정보를 다시 받아와야 하잖아요? 근데 swr은 자동으로 데이터를 가져오는데 언제 가져올지 정확히 모르니까 저희가 수동으로 다시 가져오려 한 것이고 그게 revalidate입니다.
revalidate는 사라졌는데 조건부 swr이랑 전혀 상관 없습니다. 그냥 mutate(); 하시면 됩니다. 원래도 mutate와 revalidate는 둘 다 서버로 재검사 요청을 보냈습니다.
아아 정말 감사합니다!! 완전 쉽게 잘 이해 되었습니다!
한가지 궁금한 점이 있는데, 조건부를 사용하지 않는다면 결국 불필요한 요청 자체가 발생한다고 생각되는데, 조건부 swr을 사용하는게 가장 효율적인 방법은 아닌가 싶어서요. 로그인 단계에서는 어떤 이유로 그렇게 사용하지 않는건가요?
계속 질문 드려서 죄송합니다 ㅠㅠ
조건부 요청을 사용하면 아예 요청이 가지 않는데요. 저희는 요청을 무조건 보내야 합니다. 그래야 로그인 했는지 안 했는지를 알 수 있으니까요. userData가 false면 로그인 안 된 상태고, 정보가 있으면 로그인 상태입니다. 이걸 알아야 워크스페이스로 넘어갈지 로그인 화면을 띄울지를 결정할 수 있어서요.
빠른 답변 정말 감사드립니다!
그렇다면, 강의 내에서 revalidate를 사용했던 이유가 로그인 전부터 swr로 api를 호출하게 되면, 불필요한 요청을 일으키기 때문에 로그인 버튼을 눌렀을 때 호출하도록 하는 것이라고 이해했는데, 해당 부분을 지금 버전에서 구현하는 것은 조건부로 작성해주는 것이 가장 올바른 방법인가요??