
๐งuseSWR๋?
useSWR์ React์์ ๋ฐ์ดํฐ๋ฅผ ์๋์ผ๋ก ์บ์ฑํ๊ณ , ์ฌ๊ฒ์ฆํ๋ฉฐ, ๋๊ธฐํํ๋ ๋ฐ ๋์์ ์ฃผ๋ ํ (hook)์ด๋ค. SWR์ Stale-While-Revalidate์ ์ฝ์๋ก, ์ค๋๋ ๋ฐ์ดํฐ์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ํจ๊ป ์ฒ๋ฆฌํ๋ ์ ๋ต์์ ์ด๋ฆ์ ๋ฐ์๋ค. ์ด ํ ์ ๋น๋๊ธฐ ๋ฐ์ดํฐ ์์ฒญ์ ๊ด๋ จ๋ ๋ณต์กํ ๋ก์ง์ ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์๋๋ก ์ค๊ณ๋์๋ค.
โป ๋ฐ์ดํฐ๋ฅผ ์๋์ผ๋ก ์บ์ฑํ๋ค.
ํ ๋ฒ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํด ๋๊ณ , ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ์์ฒญํ ๋ ์๋ฒ๋ก ๋๋ค์ ์์ฒญํ์ง ์๊ณ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ
๐์ฃผ์๊ธฐ๋ฅ
๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ(fetching)
- useSWR์ ์ฃผ์ด์ง ํค(key)์ fetcher ํจ์(API ํธ์ถ ๋ฑ์ ์ํํ๋ ํจ์)๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์จ๋ค.
์๋ ์บ์ฑ
- ๋ฐ์ดํฐ๋ฅผ ์บ์(Cache)ํ๊ณ , ๋์ผํ ํค๋ฅผ ์ฌ์ฉํ๋ ์์ฒญ์ ์บ์๋ ๋ฐ์ดํฐ๋ฅผ ๋จผ์ ๋ฐํํ๋ค.
์๋ ๊ฐฑ์ (revalidation)
- ์บ์๋ ๋ฐ์ดํฐ๋ฅผ ์ฆ์ ๋ฐํํ ํ, ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๊ฐ์ ธ์ ํ๋ฉด์ ์ ๋ฐ์ดํธํ๋ค.
๋ฆฌ์ผํ์ ๋ฐ์ดํฐ ๋๊ธฐํ
- ์๋ฒ์ ํด๋ผ์ด์ธํธ ๊ฐ์ ๋ฐ์ดํฐ๊ฐ ์ค์๊ฐ์ผ๋ก ์ผ์นํ๋๋ก ํ๋ ๊ธฐ๋ฅ์ด๋ค. ๋ฐ์ดํฐ๊ฐ ๋ฐ๋๊ฑฐ๋ ์๋ก๊ณ ์นจํ ํ์๊ฐ ์์ ๋, ์๋์ผ๋ก ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ํ๋ฉด์ ์ต์ ์ํ๋ก ์ ์งํ๋ค.
์๋ฌ ์ฒ๋ฆฌ
- ๋ฐ์ดํฐ ๋ก๋ฉ์ด ์คํจํ์ ๊ฒฝ์ฐ, ์ค๋ฅ ์ํ๋ฅผ ๊ฐ์งํ๊ณ ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์๋๋ก ํด์ค๋ค.
์์ ์ฝ๋๋ก ํ์ฌ ์งํํ๊ณ ์๋ ํ๋ก์ ํธ๋ฅผ ๊ฐ์ ธ์๋ดค๋ค.
๐๏ธ์์ ์ฝ๋
const { data, error } = useSWR('subjects', getSubjectEditList);
// ๋ฐ์ดํฐ๊ฐ ๋ก๋๋๋ฉด ์ํ๋ฅผ ์
๋ฐ์ดํธ
if (data && data.subjects !== subjects) {
setSubjects(data.subjects);
}
if (error) {
console.error('Failed to load subjects:', error);
}
SWR ํ ์ ์ฌ์ฉํด ๋ฐ์ดํฐ ๋ก๋
useSWR ํ ์ ํธ์ถํ์ฌ subjects๋ผ๋ ํค๋ฅผ ๊ธฐ์ค์ผ๋ก getSubjectEditList ํจ์๋ฅผ ์คํ
์ด ํ ์ data์ error ๋ ๊ฐ์ง ๊ฐ์ ๋ฐํํ๋ค.
- data: API ํธ์ถ์ด ์ฑ๊ณตํ์ ๋ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ๋ด๊ณ ์๋ค.
- error: API ํธ์ถ์ด ์คํจํ์ ๋ ๋ฐ์ํ ์๋ฌ๋ฅผ ๋ด๊ณ ์๋ค.
๋ฐ์ดํฐ๊ฐ ์ฑ๊ณต์ ์ผ๋ก ๋ก๋๋๋ฉด ์ํ ์ ๋ฐ์ดํธ
data๊ฐ ์กด์ฌํ๊ณ , data.subjects๊ฐ ํ์ฌ ์ํ๋ก ์ ์ฅ๋ subjects์ ๋ค๋ฅผ ๊ฒฝ์ฐ์๋ง setSubjects(data.subjects)๋ฅผ ์คํํ์ฌ ์ํ๋ฅผ ์ ๋ฐ์ดํธ
- data && data.subjects !== subjects
- data๊ฐ ์กด์ฌํ๋์ง(data๊ฐ null์ด๋ undefined๊ฐ ์๋์ง) ํ์ธ
- data.subjects์ ํ์ฌ ์ํ์ subjects๊ฐ ๋์ผํ์ง ์์ ๊ฒฝ์ฐ์๋ง ์คํ. ์ด๋ ์ค๋ณต๋ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ๋ฐฉ์งํ๋ค.
- setSubjects(data.subjects)
- useSubjectStore์์ ๊ด๋ฆฌํ๋ subjects ์ํ๋ฅผ ์๋กญ๊ฒ ๊ฐ์ ธ์จ data.subjects๋ก ์ ๋ฐ์ด
๐ SWR์ ์ฌ์ฉํ ๊ฒฝ์ฐ- ์ํ ๊ด๋ฆฌ ์ฐจ์ด
1.SWR์ ์ฌ์ฉํ ๊ฒฝ์ฐ
import React from 'react';
import useSWR, { mutate } from 'swr';
// ๋ฐ์ดํฐ fetcher
const fetcher = (url: string) => fetch(url).then((res) => res.json());
function ComponentA() {
const { data, mutate } = useSWR('/api/data', fetcher);
const handleUpdate = () => {
mutate({ data: 'Updated from ComponentA' }, false); // ์บ์ ์
๋ฐ์ดํธ
};
return (
<div>
<h2>Component A</h2>
<p>Data: {data?.data || 'Loading...'}</p>
<button onClick={handleUpdate}>Update Data</button>
</div>
);
}
function ComponentB() {
const { data } = useSWR('/api/data', fetcher);
return (
<div>
<h2>Component B</h2>
<p>Data: {data?.data || 'Loading...'}</p>
</div>
);
}
export default function App() {
return (
<div>
<ComponentA />
<ComponentB />
</div>
);
}
2. SWR ์์ด ์ํ ๋ฆฌํํ ์ผ๋ก ๊ตฌํํ ๊ฒฝ์ฐ
import React, { useState } from 'react';
function Parent() {
const [data, setData] = useState<{ data: string } | null>(null);
// ๋ฐ์ดํฐ fetch ํจ์ (์ต์ด ๋ก๋)
React.useEffect(() => {
fetch('/api/data')
.then((res) => res.json())
.then((data) => setData(data));
}, []);
const updateData = (newData: string) => {
setData({ data: newData }); // ์ํ ๊ฐฑ์
};
return (
<div>
<ComponentA data={data} updateData={updateData} />
<ComponentB data={data} />
</div>
);
}
function ComponentA({ data, updateData }: { data: { data: string } | null; updateData: (newData: string) => void }) {
const handleUpdate = () => {
updateData('Updated from ComponentA');
};
return (
<div>
<h2>Component A</h2>
<p>Data: {data?.data || 'Loading...'}</p>
<button onClick={handleUpdate}>Update Data</button>
</div>
);
}
function ComponentB({ data }: { data: { data: string } | null }) {
return (
<div>
<h2>Component B</h2>
<p>Data: {data?.data || 'Loading...'}</p>
</div>
);
}
export default Parent;
์ฝ๋ ๋ถ์: SWR vs ์ํ ๋ฆฌํํ
๋ฐ์ดํฐ ๋ก๋ | useSWR๋ก ๋ด๋ถ์ ์ผ๋ก fetch ๊ด๋ฆฌ (fetcher ํจ์ ์ ๋ฌ). | useEffect๋ก fetch ํธ์ถ ํ setState๋ก ์ํ ๊ด๋ฆฌ. |
๋ฐ์ดํฐ ๊ณต์ ๋ฐฉ์ | SWR์ ์บ์๋ฅผ ํ์ฉ. ๋์ผํ URL ์์ฒญ์ ์๋์ผ๋ก ๋ฐ์ดํฐ ๊ณต์ . | ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ , props๋ก ์์์๊ฒ ์ ๋ฌ. |
์ํ ์ ๋ฐ์ดํธ | mutate ํธ์ถ ์ SWR ์บ์ ๊ฐฑ์ . ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ ์ฆ์ ์ต์ ๋ฐ์ดํฐ ๋ฐ์. | setData ํธ์ถ๋ก ์ํ ๊ฐฑ์ . ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด ๊ด๋ จ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง. |
์ถ๊ฐ ๋ก์ง ํ์์ฑ | ๊ฑฐ์ ์์. SWR์ด ์๋์ผ๋ก ์บ์ ๊ด๋ฆฌ, ๋ฆฌ๋ ๋๋ง, ๋๊ธฐํ ์ฒ๋ฆฌ. | ์๋์ผ๋ก ์ํ๋ฅผ ์ ๋ฌํ๊ณ , ์ ๋ฐ์ดํธ ๋ก์ง ์์ฑ ํ์. |
์ฌ์ฉ์ฑ | ์ฝ๋๊ฐ ๊ฐ๊ฒฐํ๊ณ ๋ฐ์ดํฐ fetch/๋๊ธฐํ ๊ด๋ฆฌ ๋ก์ง์ด ์ต์ํ๋จ. | ์ํ ์ ๋ฌ(props drilling)๋ก ์ธํด ๊ณ์ธต์ด ๊น์ด์ง๋ฉด ๊ด๋ฆฌ๊ฐ ์ด๋ ค์. |
์๋ก๊ณ ์นจ/ํฌ์ปค์ค ๊ด๋ฆฌ | SWR์ด ์๋์ผ๋ก ์ฌ๊ฒ์ฆ (revalidateOnFocus ๋ฑ) ์ฒ๋ฆฌ. | ์ถ๊ฐ ๋ก์ง์ ์์ฑํ์ง ์์ผ๋ฉด ๋ฐ์ดํฐ๊ฐ ๊ฐฑ์ ๋์ง ์์. |
๋ฐ์ดํฐ ์ผ๊ด์ฑ ์ ์ง | ๋์ผํ URL์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐ ์๋์ผ๋ก ๋๊ธฐํ๋จ. | ์ํ๋ฅผ ์๋์ผ๋ก ์ ๋ฌํ๋ฏ๋ก, ์๋ชป ๊ด๋ฆฌํ๋ฉด ์ผ๊ด์ฑ์ด ๊นจ์ง ๊ฐ๋ฅ์ฑ ์์. |
์์ ์คํ ๊ฒฐ๊ณผ
SWR ์ฌ์ฉ ์
ComponentA์์ mutate๋ฅผ ํธ์ถํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๊ฐฑ์ ํ๋ฉด
- SWR์ ์บ์๊ฐ ์ ๋ฐ์ดํธ๋๊ณ , ๋์ผ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ComponentB๋ ์ฆ์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ํ์.
- ๋ฐ์ดํฐ ๊ด๋ฆฌ ๋ก์ง์ด ํ์ ์์.
์ํ ๋ฆฌํํ ์ฌ์ฉ ์
ComponentA์์ updateData๋ฅผ ํธ์ถํ๋ฉด
- Parent์์ ์ํ๊ฐ ๊ฐฑ์ ๋๊ณ , ์ด๋ฅผ ์ ๋ฌ๋ฐ๋ ComponentB๊ฐ ๋ฆฌ๋ ๋๋ง๋์ด ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ํ์.
- props๋ก ์ํ์ ์ ๋ฐ์ดํธ ํจ์๋ฅผ ์ ๋ฌํด์ผ ํ๋ฏ๋ก ๊ณ์ธต์ด ๊น์ด์ง์๋ก ์ฝ๋๊ฐ ๋ณต์กํด์ง.
๊ฒฐ๋ก
SWR์ ์ฅ์
- ์บ์์ ๋๊ธฐํ๋ฅผ SWR์ด ์๋์ผ๋ก ์ฒ๋ฆฌํ๋ฏ๋ก ๋ฐ์ดํฐ ๋ก์ง์ ์ต์ํํ ์ ์์.
- URL ๊ธฐ๋ฐ ๋ฐ์ดํฐ ๊ด๋ฆฌ๋ก ๋ฐ์ดํฐ ์ผ๊ด์ฑ์ ์ฝ๊ฒ ์ ์ง.
- ํ์ด์ง ํฌ์ปค์ค, ๋คํธ์ํฌ ์ํ ๋ณํ ์ ์๋ ์ฌ๊ฒ์ฆ ๊ฐ๋ฅ.
์ํ ๋ฆฌํํ ์ ๋จ์
- ๋ถ๋ชจ-์์ ๊ฐ props ์ ๋ฌ๋ก ์ธํด ๊ณ์ธต์ด ๊น์ด์ง์๋ก ๊ด๋ฆฌ๊ฐ ์ด๋ ค์.
- ์ถ๊ฐ ๋ก์ง(์ํ ๊ด๋ฆฌ, fetch, ์ํ ๋๊ธฐํ)์ ๊ฐ๋ฐ์๊ฐ ์ง์ ์์ฑํด์ผ ํจ.
SWR์ ํนํ ๋ฐ์ดํฐ ์ค์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๊ฐ๋ฐ ์์ฐ์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์๋ ๋๊ตฌ์ ๋๋ค. ๐
๊ฒฐ๋ก
- useSWR์ ๋ฐ์ดํฐ ํ์นญ ๋ฐ ์บ์ฑ, ์๋ ๊ฐฑ์ ๊ณผ ๊ฐ์ ๋ณต์กํ ๋น๋๊ธฐ ๋ก์ง์ ๊ฐํธํ๊ฒ ์ฒ๋ฆฌํ๊ณ , ์ค์๊ฐ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์งํ๋ ๋ฐ ์ ํฉ.
- useEffect๋ API ํธ์ถ์ด๋ ๋น๋๊ธฐ ์์ ์ ์ ์ดํ ์ ์์ง๋ง, ๋ฐ์ดํฐ ๊ด๋ฆฌ์ ์บ์ฑ์ ์ง์ ์ฒ๋ฆฌํด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋จ์ํ ๋ถ์ ํจ๊ณผ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ๋ ์ ํฉ.
์ฐธ๊ณ ์๋ฃ
'Frontend > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React - React Testing Library,Jest ์ด์ฉํด์ ํ ์คํธํ๊ธฐ (0) | 2024.10.13 |
---|---|
React - .env ํ๊ฒฝ ๋ณ์ ์ฌ์ฉํ๊ธฐ (0) | 2024.05.09 |
React - MSW2.0 ์ ๋ฐ์ดํธ ๋ฒ์ (1) | 2024.04.28 |
react - Hooks(useState, useEffect, useContext) (0) | 2024.02.15 |
react - recoil์ด๋? (0) | 2023.12.31 |

๐งuseSWR๋?
useSWR์ React์์ ๋ฐ์ดํฐ๋ฅผ ์๋์ผ๋ก ์บ์ฑํ๊ณ , ์ฌ๊ฒ์ฆํ๋ฉฐ, ๋๊ธฐํํ๋ ๋ฐ ๋์์ ์ฃผ๋ ํ (hook)์ด๋ค. SWR์ Stale-While-Revalidate์ ์ฝ์๋ก, ์ค๋๋ ๋ฐ์ดํฐ์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ํจ๊ป ์ฒ๋ฆฌํ๋ ์ ๋ต์์ ์ด๋ฆ์ ๋ฐ์๋ค. ์ด ํ ์ ๋น๋๊ธฐ ๋ฐ์ดํฐ ์์ฒญ์ ๊ด๋ จ๋ ๋ณต์กํ ๋ก์ง์ ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์๋๋ก ์ค๊ณ๋์๋ค.
โป ๋ฐ์ดํฐ๋ฅผ ์๋์ผ๋ก ์บ์ฑํ๋ค.
ํ ๋ฒ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํด ๋๊ณ , ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ์์ฒญํ ๋ ์๋ฒ๋ก ๋๋ค์ ์์ฒญํ์ง ์๊ณ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ
๐์ฃผ์๊ธฐ๋ฅ
๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ(fetching)
- useSWR์ ์ฃผ์ด์ง ํค(key)์ fetcher ํจ์(API ํธ์ถ ๋ฑ์ ์ํํ๋ ํจ์)๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์จ๋ค.
์๋ ์บ์ฑ
- ๋ฐ์ดํฐ๋ฅผ ์บ์(Cache)ํ๊ณ , ๋์ผํ ํค๋ฅผ ์ฌ์ฉํ๋ ์์ฒญ์ ์บ์๋ ๋ฐ์ดํฐ๋ฅผ ๋จผ์ ๋ฐํํ๋ค.
์๋ ๊ฐฑ์ (revalidation)
- ์บ์๋ ๋ฐ์ดํฐ๋ฅผ ์ฆ์ ๋ฐํํ ํ, ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๊ฐ์ ธ์ ํ๋ฉด์ ์ ๋ฐ์ดํธํ๋ค.
๋ฆฌ์ผํ์ ๋ฐ์ดํฐ ๋๊ธฐํ
- ์๋ฒ์ ํด๋ผ์ด์ธํธ ๊ฐ์ ๋ฐ์ดํฐ๊ฐ ์ค์๊ฐ์ผ๋ก ์ผ์นํ๋๋ก ํ๋ ๊ธฐ๋ฅ์ด๋ค. ๋ฐ์ดํฐ๊ฐ ๋ฐ๋๊ฑฐ๋ ์๋ก๊ณ ์นจํ ํ์๊ฐ ์์ ๋, ์๋์ผ๋ก ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ํ๋ฉด์ ์ต์ ์ํ๋ก ์ ์งํ๋ค.
์๋ฌ ์ฒ๋ฆฌ
- ๋ฐ์ดํฐ ๋ก๋ฉ์ด ์คํจํ์ ๊ฒฝ์ฐ, ์ค๋ฅ ์ํ๋ฅผ ๊ฐ์งํ๊ณ ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์๋๋ก ํด์ค๋ค.
์์ ์ฝ๋๋ก ํ์ฌ ์งํํ๊ณ ์๋ ํ๋ก์ ํธ๋ฅผ ๊ฐ์ ธ์๋ดค๋ค.
๐๏ธ์์ ์ฝ๋
const { data, error } = useSWR('subjects', getSubjectEditList);
// ๋ฐ์ดํฐ๊ฐ ๋ก๋๋๋ฉด ์ํ๋ฅผ ์
๋ฐ์ดํธ
if (data && data.subjects !== subjects) {
setSubjects(data.subjects);
}
if (error) {
console.error('Failed to load subjects:', error);
}
SWR ํ ์ ์ฌ์ฉํด ๋ฐ์ดํฐ ๋ก๋
useSWR ํ ์ ํธ์ถํ์ฌ subjects๋ผ๋ ํค๋ฅผ ๊ธฐ์ค์ผ๋ก getSubjectEditList ํจ์๋ฅผ ์คํ
์ด ํ ์ data์ error ๋ ๊ฐ์ง ๊ฐ์ ๋ฐํํ๋ค.
- data: API ํธ์ถ์ด ์ฑ๊ณตํ์ ๋ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ๋ด๊ณ ์๋ค.
- error: API ํธ์ถ์ด ์คํจํ์ ๋ ๋ฐ์ํ ์๋ฌ๋ฅผ ๋ด๊ณ ์๋ค.
๋ฐ์ดํฐ๊ฐ ์ฑ๊ณต์ ์ผ๋ก ๋ก๋๋๋ฉด ์ํ ์ ๋ฐ์ดํธ
data๊ฐ ์กด์ฌํ๊ณ , data.subjects๊ฐ ํ์ฌ ์ํ๋ก ์ ์ฅ๋ subjects์ ๋ค๋ฅผ ๊ฒฝ์ฐ์๋ง setSubjects(data.subjects)๋ฅผ ์คํํ์ฌ ์ํ๋ฅผ ์ ๋ฐ์ดํธ
- data && data.subjects !== subjects
- data๊ฐ ์กด์ฌํ๋์ง(data๊ฐ null์ด๋ undefined๊ฐ ์๋์ง) ํ์ธ
- data.subjects์ ํ์ฌ ์ํ์ subjects๊ฐ ๋์ผํ์ง ์์ ๊ฒฝ์ฐ์๋ง ์คํ. ์ด๋ ์ค๋ณต๋ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ๋ฐฉ์งํ๋ค.
- setSubjects(data.subjects)
- useSubjectStore์์ ๊ด๋ฆฌํ๋ subjects ์ํ๋ฅผ ์๋กญ๊ฒ ๊ฐ์ ธ์จ data.subjects๋ก ์ ๋ฐ์ด
๐ SWR์ ์ฌ์ฉํ ๊ฒฝ์ฐ- ์ํ ๊ด๋ฆฌ ์ฐจ์ด
1.SWR์ ์ฌ์ฉํ ๊ฒฝ์ฐ
import React from 'react';
import useSWR, { mutate } from 'swr';
// ๋ฐ์ดํฐ fetcher
const fetcher = (url: string) => fetch(url).then((res) => res.json());
function ComponentA() {
const { data, mutate } = useSWR('/api/data', fetcher);
const handleUpdate = () => {
mutate({ data: 'Updated from ComponentA' }, false); // ์บ์ ์
๋ฐ์ดํธ
};
return (
<div>
<h2>Component A</h2>
<p>Data: {data?.data || 'Loading...'}</p>
<button onClick={handleUpdate}>Update Data</button>
</div>
);
}
function ComponentB() {
const { data } = useSWR('/api/data', fetcher);
return (
<div>
<h2>Component B</h2>
<p>Data: {data?.data || 'Loading...'}</p>
</div>
);
}
export default function App() {
return (
<div>
<ComponentA />
<ComponentB />
</div>
);
}
2. SWR ์์ด ์ํ ๋ฆฌํํ ์ผ๋ก ๊ตฌํํ ๊ฒฝ์ฐ
import React, { useState } from 'react';
function Parent() {
const [data, setData] = useState<{ data: string } | null>(null);
// ๋ฐ์ดํฐ fetch ํจ์ (์ต์ด ๋ก๋)
React.useEffect(() => {
fetch('/api/data')
.then((res) => res.json())
.then((data) => setData(data));
}, []);
const updateData = (newData: string) => {
setData({ data: newData }); // ์ํ ๊ฐฑ์
};
return (
<div>
<ComponentA data={data} updateData={updateData} />
<ComponentB data={data} />
</div>
);
}
function ComponentA({ data, updateData }: { data: { data: string } | null; updateData: (newData: string) => void }) {
const handleUpdate = () => {
updateData('Updated from ComponentA');
};
return (
<div>
<h2>Component A</h2>
<p>Data: {data?.data || 'Loading...'}</p>
<button onClick={handleUpdate}>Update Data</button>
</div>
);
}
function ComponentB({ data }: { data: { data: string } | null }) {
return (
<div>
<h2>Component B</h2>
<p>Data: {data?.data || 'Loading...'}</p>
</div>
);
}
export default Parent;
์ฝ๋ ๋ถ์: SWR vs ์ํ ๋ฆฌํํ
๋ฐ์ดํฐ ๋ก๋ | useSWR๋ก ๋ด๋ถ์ ์ผ๋ก fetch ๊ด๋ฆฌ (fetcher ํจ์ ์ ๋ฌ). | useEffect๋ก fetch ํธ์ถ ํ setState๋ก ์ํ ๊ด๋ฆฌ. |
๋ฐ์ดํฐ ๊ณต์ ๋ฐฉ์ | SWR์ ์บ์๋ฅผ ํ์ฉ. ๋์ผํ URL ์์ฒญ์ ์๋์ผ๋ก ๋ฐ์ดํฐ ๊ณต์ . | ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ , props๋ก ์์์๊ฒ ์ ๋ฌ. |
์ํ ์ ๋ฐ์ดํธ | mutate ํธ์ถ ์ SWR ์บ์ ๊ฐฑ์ . ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ ์ฆ์ ์ต์ ๋ฐ์ดํฐ ๋ฐ์. | setData ํธ์ถ๋ก ์ํ ๊ฐฑ์ . ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด ๊ด๋ จ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง. |
์ถ๊ฐ ๋ก์ง ํ์์ฑ | ๊ฑฐ์ ์์. SWR์ด ์๋์ผ๋ก ์บ์ ๊ด๋ฆฌ, ๋ฆฌ๋ ๋๋ง, ๋๊ธฐํ ์ฒ๋ฆฌ. | ์๋์ผ๋ก ์ํ๋ฅผ ์ ๋ฌํ๊ณ , ์ ๋ฐ์ดํธ ๋ก์ง ์์ฑ ํ์. |
์ฌ์ฉ์ฑ | ์ฝ๋๊ฐ ๊ฐ๊ฒฐํ๊ณ ๋ฐ์ดํฐ fetch/๋๊ธฐํ ๊ด๋ฆฌ ๋ก์ง์ด ์ต์ํ๋จ. | ์ํ ์ ๋ฌ(props drilling)๋ก ์ธํด ๊ณ์ธต์ด ๊น์ด์ง๋ฉด ๊ด๋ฆฌ๊ฐ ์ด๋ ค์. |
์๋ก๊ณ ์นจ/ํฌ์ปค์ค ๊ด๋ฆฌ | SWR์ด ์๋์ผ๋ก ์ฌ๊ฒ์ฆ (revalidateOnFocus ๋ฑ) ์ฒ๋ฆฌ. | ์ถ๊ฐ ๋ก์ง์ ์์ฑํ์ง ์์ผ๋ฉด ๋ฐ์ดํฐ๊ฐ ๊ฐฑ์ ๋์ง ์์. |
๋ฐ์ดํฐ ์ผ๊ด์ฑ ์ ์ง | ๋์ผํ URL์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐ ์๋์ผ๋ก ๋๊ธฐํ๋จ. | ์ํ๋ฅผ ์๋์ผ๋ก ์ ๋ฌํ๋ฏ๋ก, ์๋ชป ๊ด๋ฆฌํ๋ฉด ์ผ๊ด์ฑ์ด ๊นจ์ง ๊ฐ๋ฅ์ฑ ์์. |
์์ ์คํ ๊ฒฐ๊ณผ
SWR ์ฌ์ฉ ์
ComponentA์์ mutate๋ฅผ ํธ์ถํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๊ฐฑ์ ํ๋ฉด
- SWR์ ์บ์๊ฐ ์ ๋ฐ์ดํธ๋๊ณ , ๋์ผ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ComponentB๋ ์ฆ์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ํ์.
- ๋ฐ์ดํฐ ๊ด๋ฆฌ ๋ก์ง์ด ํ์ ์์.
์ํ ๋ฆฌํํ ์ฌ์ฉ ์
ComponentA์์ updateData๋ฅผ ํธ์ถํ๋ฉด
- Parent์์ ์ํ๊ฐ ๊ฐฑ์ ๋๊ณ , ์ด๋ฅผ ์ ๋ฌ๋ฐ๋ ComponentB๊ฐ ๋ฆฌ๋ ๋๋ง๋์ด ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ํ์.
- props๋ก ์ํ์ ์ ๋ฐ์ดํธ ํจ์๋ฅผ ์ ๋ฌํด์ผ ํ๋ฏ๋ก ๊ณ์ธต์ด ๊น์ด์ง์๋ก ์ฝ๋๊ฐ ๋ณต์กํด์ง.
๊ฒฐ๋ก
SWR์ ์ฅ์
- ์บ์์ ๋๊ธฐํ๋ฅผ SWR์ด ์๋์ผ๋ก ์ฒ๋ฆฌํ๋ฏ๋ก ๋ฐ์ดํฐ ๋ก์ง์ ์ต์ํํ ์ ์์.
- URL ๊ธฐ๋ฐ ๋ฐ์ดํฐ ๊ด๋ฆฌ๋ก ๋ฐ์ดํฐ ์ผ๊ด์ฑ์ ์ฝ๊ฒ ์ ์ง.
- ํ์ด์ง ํฌ์ปค์ค, ๋คํธ์ํฌ ์ํ ๋ณํ ์ ์๋ ์ฌ๊ฒ์ฆ ๊ฐ๋ฅ.
์ํ ๋ฆฌํํ ์ ๋จ์
- ๋ถ๋ชจ-์์ ๊ฐ props ์ ๋ฌ๋ก ์ธํด ๊ณ์ธต์ด ๊น์ด์ง์๋ก ๊ด๋ฆฌ๊ฐ ์ด๋ ค์.
- ์ถ๊ฐ ๋ก์ง(์ํ ๊ด๋ฆฌ, fetch, ์ํ ๋๊ธฐํ)์ ๊ฐ๋ฐ์๊ฐ ์ง์ ์์ฑํด์ผ ํจ.
SWR์ ํนํ ๋ฐ์ดํฐ ์ค์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๊ฐ๋ฐ ์์ฐ์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์๋ ๋๊ตฌ์ ๋๋ค. ๐
๊ฒฐ๋ก
- useSWR์ ๋ฐ์ดํฐ ํ์นญ ๋ฐ ์บ์ฑ, ์๋ ๊ฐฑ์ ๊ณผ ๊ฐ์ ๋ณต์กํ ๋น๋๊ธฐ ๋ก์ง์ ๊ฐํธํ๊ฒ ์ฒ๋ฆฌํ๊ณ , ์ค์๊ฐ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์งํ๋ ๋ฐ ์ ํฉ.
- useEffect๋ API ํธ์ถ์ด๋ ๋น๋๊ธฐ ์์ ์ ์ ์ดํ ์ ์์ง๋ง, ๋ฐ์ดํฐ ๊ด๋ฆฌ์ ์บ์ฑ์ ์ง์ ์ฒ๋ฆฌํด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋จ์ํ ๋ถ์ ํจ๊ณผ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ๋ ์ ํฉ.
์ฐธ๊ณ ์๋ฃ
'Frontend > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React - React Testing Library,Jest ์ด์ฉํด์ ํ ์คํธํ๊ธฐ (0) | 2024.10.13 |
---|---|
React - .env ํ๊ฒฝ ๋ณ์ ์ฌ์ฉํ๊ธฐ (0) | 2024.05.09 |
React - MSW2.0 ์ ๋ฐ์ดํธ ๋ฒ์ (1) | 2024.04.28 |
react - Hooks(useState, useEffect, useContext) (0) | 2024.02.15 |
react - recoil์ด๋? (0) | 2023.12.31 |