Mutate
mutate๋ ์๊ฒฉ ๋ฐ์ดํฐ ๋ฐ ์บ์ฑ๋ ๊ฐ์ ๋ณ๊ฒฝ, ๊ฐฑ์ ํ๊ธฐ ์ํด ์ฌ์ฉ๋ฉ๋๋ค.
๋ค๋ฅธ ๊ณณ์์ ํด๋นํ๋ ํค๊ฐ์ ๋ฐ์ดํฐ๋ฅผ post๋ delete, patch ๋ฑ ์์ ์ด ์ผ์ด๋ฌ์ ๊ฒฝ์ฐ, ์บ์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐฑ์ ํด์ผ ๋ ๋
์ฌ์ฉ๋๋ค๊ณ ๋ณด๋ฉด ๋ฉ๋๋ค. (revalidation)
Global๊ณผ Bound ๋ ๊ฐ์ง๋ก ๋๋ ์ ธ ์์ต๋๋ค.
Global Mutate
useSWRConfig ๋๋ swr์ import ํด์ ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค.
import { useSWRConfig } from "swr"
function App() {
const { mutate } = useSWRConfig()
mutate(key, data, options)
}
///////////////////////////////////////
import { mutate } from "swr"
function App() {
mutate(key, data, options)
}
mutate(`/account/user`);
์ด๋ฐ์์ผ๋ก ์ฌ์ฉํ์๋ฉด ๋ฉ๋๋ค.
์ด๊ฒ๋ 2๊ฐ์ง ์ ์ธ ๋ฐฉ๋ฒ์ด ์๋๋ฐ, ๊ณตํ ๊ถ์ฅ์ฌํญ์ useSWRconfig๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ผ๋ก ๋์์์ต๋๋ค.
์ญํ ์ ๊ฐ์ผ๋, ์๊ด์์ ๋ฏ์ถ์ต๋๋ค.
Bound Mutate
import useSWR from 'swr'
function Profile () {
const { data, mutate } = useSWR('/api/user', fetcher)
return (
<div>
<h1>My name is {data.name}.</h1>
<button onClick={async () => {
mutate();
}}>Uppercase my name!</button>
</div>
)
}
Global ๋ฐฉ๋ฒ๊ณผ ๋ฌ๋ฆฌ useSWR์ ํตํด key๊ฐ์ ๋ฐ์ธ๋ฉํด ๋จ๊ธฐ ๋๋ฌธ์ mutate ์คํ์ํค๋ฉด ๋ฉ๋๋ค.
data๊ฐ์ ๋ณ๊ฒฝํ๊ณ ์ถ์ ๋ฐ์ดํฐ๋ฅผ ๋ฃ์ผ๋ฉด mutate๋ฅผ ์ฌ์ฉํ์ฌ ์ฆ์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค..
mutate(key, { ...data, name: newName }, oprion); // binding ๋์ ๊ฒฝ์ฐ, key์๋ต
mutate๋ฅผ ํตํด data์ถ๊ฐ๋๋ ๊ฑด ์บ์ฑ๋ ๋ฐ์ดํฐ๊ฐ ์ถ๊ฐ๋๋ ๊ฒ์ผ ๊ฒ๋๋ค. (์ ๋ ์ฌ์ฉ์ ์ ํด๋ด์...)
๋ฐ๋ผ์ DB์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ฒ ๋ ๊ฒฝ์ฐ์๋ ์๋ก๊ณ ์นจํ๊ฑฐ๋ ๋ค์ DB ๋ฐ์ดํฐ๋ฅผ ์กฐํํ๋ ํ์๋ฅผ ํ์ ๋, ์ถ๊ฐ๋ data๋ ์์ด์ง ๊ฒ์ผ๋ก ์์๋ฉ๋๋ค.
mutate๋ option์ด ์กด์ฌํ๋ฏ๋ก, ๊ณตํ ํ์ธํด ๋ณด์๋ฉด ๋ฉ๋๋ค.
https://swr.vercel.app/ko/docs/mutation
mutate๋ ๋ฐ์ดํฐ ๋งค๊ฐ๋ณ์๊ฐ ํด๊ฒฐ๋ ๊ฒฐ๊ณผ๊ฐ์ ๋ฐํํ๊ธฐ ๋๋ฌธ์ ๋ณ์์ ์ ์ฅํ์ฌ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
SWR์์ useSWRMutation์ importํ์ฌ trigger๋ผ๋ ์ ์ธํ ํจ์๋ฅผ ํตํด API๋ฅผ ํต์ ํ ์ ์๋ ๊ฒ ์ต๊ทผ์ ์๊ฒผ์ต๋๋ค.
(SWR 2.0 ๋ฒ์ )
get์์ฒญ์ ํํด์๋ง ์ฌ์ฉํ๋๋ฐ, ์ด ๋ฒ์๋ฅผ ๋๋ ค ํต์ ๋ฉ์๋ ์ ์ฒด๋ฅผ ํ์ฉํ๊ณ ์ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
์์ง ์๋ฃ๊ฐ ๋ง์ง ์์ ๊ฒ ๊ฐ๊ณ , ์ฌ์ฉํด ๋ณธ ์ ์ด ์์ด ์์ง์ ๋ฐ๋ก ๋ค๋ฃจ์ง ์๊ฒ ์ง๋ง,
ํต์ผ๋์ด ํ๋์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ง ์ฌ์ฉํ๋ค๋ ๊ฑด ์ข์ ๋ฉ๋ฆฌํธ์ธ ๊ฒ ๊ฐ์ต๋๋ค.
์ ๊ทธ๋๋ ์ด๊ฒ์ ๊ฒ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ๋ค ์ฐ๊ธฐ ๋ฐ์๋ฐ...
'Front-End > Library' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Library] swagger-ui-react (0) | 2023.07.07 |
---|---|
Library] SWR : ์์ฉ_Pagination & InfiniteScroll(useSWRInfinite) (0) | 2023.07.04 |
Library] SWR : ์์ฉ (0) | 2023.07.03 |
Library] SWR (0) | 2023.07.03 |
Library] Swiper (0) | 2023.06.29 |