• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

setShowCreateChannelModal props의 타입 질문

21.09.07 15:32 작성 조회수 166

0

강의에서,

setShowCreateChannelModal props의 타입을 

(flag:boolean)=>void;라고 지정하셨는데,

setState의 경우 기본적으로는 Dispatch<setStateAction<S>>

이런식이었던 것 같은데  이렇게 안쓰고 그냥

저렇게 쓸 수 있는 건가요?

 

답변 2

·

답변을 작성해보세요.

0

inust33님의 프로필

inust33

질문자

2021.09.07

감사합니다.  이건 mutate에 관한 질문인데, 

const{data:userData, mutate} = useSWR();

이렇게 선언했을경우 mutate(userData)라고 하면 revalidate랑 똑같이 갱신을 한번 더 하는 역할을 하는건가요?

그리고 혹시 API 문서 주소 알려주시면 감사하겠습니다!

https://swr.vercel.app/ko/docs/getting-started

네 mutate도 두 번째 인수가 없을 경우 갱신합니다.

inust33님의 프로필

inust33

질문자

2021.09.07

흡 저희 백엔트 api 문서 주소였는데 찾았습니다! 

우선 mutate함수의 boolean 옵션인 shouldRevalidate (true, false)가 하는 역할이 궁금한데요, 

우선 mutate(false, true) 이렇게 인자를 넣는다면 현재 data를 false로 변경한 뒤에 키를 조회해서 이것이 실제로 false가 맞는지 검사를 한다는 건가요?

만약 여기서 다르다고 에러가 나게 되면 그 에러는 catch문에서 검출이 되나요?

.then(()=>mutate(false, true).catch(error=>console.dir(error)); 여기서 mutate의 에러가 검출이 되나요?

또하나는 

const{ data:userData, error, mutate} = useSWR()이라고 할 때, 

axios.post()

.then(res=>{mutate(userData); })

.catch(e=>console.dir(e));

여기서

mutate(res.data)와 mutate(userData)의 차이가 궁금합니다.

mutate(res.data)는 userData를 res.data로 업데이트 하는 것이기에 뒤에 shouldRevalidate이 true, false모두 가능하지만

mutate(userData)는 단순히 한번더 갱신을 실행한다는 표현같은데, 이 때는 shouldRevalidate가 false일 수가 없지 않은지 궁금하네요.

즉 mutate(userData, false)라는 함수는 실행이 불가능한게 맞는지가 궁금합니다 

항상 답변해주셔서 감사합니다. 덕분에 정말 재밌게 열심히 공부하고 있습니다.

shouldRevalidate가 true면 fetcher를 한 번 더 실행한다는 것입니다. 즉, 서버에 요청을 보내서 데이터를 최신으로 업데이트 하겠죠. 다르면 에러가 아니라 최신 데이터로 업데이트하는 겁니다.

다만 mutate(res.data)는 서버에서 온 데이터라 확실하겠지만 mutate(userData)는 서버에서 실패했을 수도 있으니 서버에 재검사를 하겠죠. mutate(userData, false)도 가능합니다.  다만 서버에 재검사를 하지 않으니 서버는 실패하고 프론트는 성공한 것처럼 보이는 문제가 생길 수 있습니다.

inust33님의 프로필

inust33

질문자

2021.09.07

mutate(userData)도 fetcher에서 서버로부터 한번 더 요청한다는 의미 아닌가요? 이부분이 헷갈리네요 

mutate(res.data)는 방금 보낸 post 요청으로 내 swr 데이터를 업데이트한다는 의미, 여기서 true면 swr에서 서버에 한번 더 fetch 해서 다르면 업뎃,

 

mutate(userData)는 방금 보낸 post 요청과는 별개로 내 swr 데이터를 fetcher함수로 한번 더 갱신. 그럼 여기서 true면 갱신을 2번한다는 의미인가요?

 

네 서버에 데이터 재요청을 합니다. userData랑 res.data가 달라질 수 있나 생각해보시면 됩니다.

0

flag는 그냥 변수명입니다. 다른 아무거나 상관 없습니다. 보통 boolean에 대한 변수명을 flag로 많이 짓습니다.

네 일단 저렇게 간단하게 타이핑해보고, 안 될 때 Dispatch...로 복잡하게 타이핑하면 됩니다.