json-server๋ก ์์ ๋ฐฑ์๋ & DB ๋ง๋ค๊ธฐ
// 1. json-server ์ค์น
yarn add json-server
// 2. package.json์ ๋ช
๋ น์ด ์
๋ ฅ
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
// ์ฌ๊ธฐ์ ์ด๋ ๊ฒ ์ถ๊ฐ
"run-server": "json-server --watch db.json --port 3001"
},
// 3. json-server ์คํ
yarn run run-server
axios ์ค์นํ๊ธฐ
yarn add axios
// ๊ธฐ์กด์ ๋ฐฉ๋ฒ
// 1. ๋ฐฑ์๋๋ก ๋ฐ์ดํฐ ์ถ๊ฐ ์์ฒญ ํ
await fetch("์ฃผ์", { method: "POST", ~~ })
// 2. redux ์
๋ฐ์ดํธ ํด์ผ ํจ
dispatch(์ถ๊ฐํ๊ธฐ(์๋ก์ด์ํ))
react-query๋ ๋ฐฑ์๋ ๋ฐ์ดํฐ์ ํ๋ก ํธ์๋ ๋ฐ์ดํฐ์ ์ฑํฌ๋ฅผ ๊ณ์ ๋ง์ถฐ์ค -> ๊ด๋ฆฌ๊ฐ ํธํจ
์ด์ธ์๋ ํธ๋ฆฌํ ๊ธฐ๋ฅ์ ๋ง์ด ์ ๊ณตํด์ค
isLoading
, isError
๋ฑ์ ์ง์ ๋ง๋ค ํ์๊ฐ ์์1. ์ค์นํ๊ธฐ
yarn add react-query
2. react-query๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ ๊ณณ์ ๋ค์๊ณผ ๊ฐ์ด ์ธํ ํ๊ธฐ (index.js)
// react-query์์ 2๊ฐ import ํ๊ธฐ
import { QueryClient, QueryClientProvider } from "react-query";
// ๋ณ์ ์ ์ธํ๊ธฐ
const queryClient = new QueryClient();
// QueryClientProvider ๋ก ๊ฐ์ธ๊ธฐ
root.render(
<QueryClientProvider client={queryClient}>
<React.StrictMode>
<App />
</React.StrictMode>
</QueryClientProvider>
);
1. ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ค๋ ์ปดํฌ๋ํธ์์ useQuery import ํ๊ธฐ
import { useQuery } from "react-query"
import axios from "axios";
2. useQuery ์ฌ์ฉํ๊ธฐ (App.js)
const result = useQuery(๋ฌธ์์ด๋ก ์ด๋ฆ์ง๊ธฐ, ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๋ ํจ์);
//
const result = useQuery("posts", async () => {
const response = await axios.get("http://localhost:3001/posts");
return response.data;
});
3. result์ ์ด๋ค ๋ฐ์ดํฐ๊ฐ ๋ค์ด์๋์ง ํ์ธํด๋ณด๊ธฐ
console.log(result)
result๋ ๊ฐ์ฒด
๊ทธ ์ค data๋ง ๋ณด์ฌ์ฃผ๊ธฐ ์ํด์ {data} ๋ฝ์๋ด๊ธฐ
4. data๋ฅผ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ๊ธฐ
// data๋ ๊ฐ์ฒด๋ฅผ ์์๋ก ๊ฐ์ง๊ณ ์๋ ๋ฐฐ์ด
return (
<div>
{data.map((post) => {
return <div>{post.title}</div>;
})}
</div>
);
error๊ฐ ๋๋ ์ด์ -> data๋ฅผ ๊ฐ์ ธ์ค๋๋ฐ ์๊ฐ์ด ๊ฑธ๋ฆผ!
5. isLoading ํ์ฉํ๊ธฐ
const { data, isLoading } = useQuery("posts", async () => {
const response = await axios.get("http://localhost:3001/posts");
return response.data;
});
if (isLoading) {
return <div>๋ฐ์ดํฐ ๊ฐ์ ธ์ค๋ ์ค์</div>;
}
6. ์๋ฌ ์ฒ๋ฆฌํ๊ธฐ
isError
์ error
๋ผ๋ ๋ฐ์ดํฐ๋ ์กด์ฌํจ const { data, isLoading, isError, error } = useQuery("posts", async () => {
const response = await axios.get("http://localhost:3001/posts");
return response.data;
});
if (isError) {
return <div>{error.message}</div>
}
useQuery
๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ๋ ์ฌ์ฉuseMutation
์ฌ์ฉ1. useMutaion import ํ๊ธฐ
import { useMutation } from "react-query";
2. useMutation ์ฌ์ฉํ๊ธฐ
const mutation = useMutation(๋ฐ์ดํฐ ์ถ๊ฐ or ์์ or ์ญ์ ๊ด๋ จ ํจ์);
const mutation = useMutation(async () => {
await axios.post("http://localhost:3001/posts", {
id: nanoid(),
title: "ํํ",
author: "๋ณธ์ธ",
});
});
3. ์ถ๊ฐํ๊ธฐ ๋ฒํผ ๋ง๋ค๊ธฐ
<button
onClick={() => {
mutation.mutate();
}}
>
๋ฐ์ดํฐ์ถ๊ฐ!!
</button>
๋ฒํผ์ ๋๋ฅด๋ฉด ๋ฐ์ดํฐ๊ฐ db.json์ ์ถ๊ฐ๋๋ ๊ฒ์ ํ์ธํ ์ ์์
but, ๋ฐ์ดํฐ ์ถ๊ฐ ํ ํ๋ฉด์ ๋ฐ๋ก ๋ฐ๋์ง ์๊ณ ์์
1. useQueryClient๋ฅผ import ํ๊ธฐ (App.js)
import { useQuery, useMutation, useQueryClient } from "react-query";
2. useQueryClient๋ฅผ ์ฌ์ฉํจ
const queryClient = new useQueryClient();
3. useMutation์ ๋๋ฒ์งธ ํ๋ผ๋ฏธํฐ์ ์ฝ๋ ์ถ๊ฐ
{
onSuccess: () => {
queryClient.invalidateQueries("posts");
},
}
์ ์ฝ๋๋ ๋ด๊ฐ ๋ฃ์ ๋ฐ์ดํฐ๋ง ๋ฃ์ ์ ์์
1. ๋งค๋ฒ ๋ค๋ฅธ ๊ฐ์ ๋ฃ๊ธฐ ์ํด์ ์ฝ๋๋ฅผ ๋ณ๊ฒฝํด๋ณด๊ธฐ
const mutation = useMutation(
// ํจ์์ parameter ์ถ๊ฐ ๋ฐ ์ฌ์ฉํ๊ธฐ
async (์๋ก์ด๋ฐ์ดํฐ) => {
await axios.post("http://localhost:3001/posts", ์๋ก์ด๋ฐ์ดํฐ);
},
{
onSuccess: () => {
queryClient.invalidateQueries("posts");
},
}
);
2. mutation() ๋ถ๋ถ์ ๋ค์๊ณผ ๊ฐ์ด ๋ณ๊ฒฝํ๊ธฐ
<button
onClick={() => {
mutation.mutate({
id: nanoid(),
title: "useState๋ก ์
๋ ฅ๋ title",
author: "useState๋ก ์
๋ ฅ๋ author",
});
}}
>
๋ฐ์ดํฐ์ถ๊ฐ!!
</button>
๋ด๊ฐ ๋งก์ ๋ถ๋ถ : ํ์ด์ด๋ฒ ์ด์ค๋ฅผ ํ์ฉํ ํ์๊ฐ์ ๋ฐ ๋ก๊ทธ์ธ ๊ธฐ๋ฅ ๊ตฌํ
๋๋ค์ ํ๋ก์ ํธ ์์์ด๋ค. ์ด๋ฒ์๋ ํ๋ฒ๋ ์งํํด๋ณด์ง ์์๋ firebase๋ฅผ ๋งก๊ฒ ๋ผ์ ๋๋ฌด๋๋ฌด ๊ฑฑ์ ๋์ง๋ง ์ด๋ป๊ฒ๋ ๋ ํด๋ด์ผ์ง ์ด์ฉ๊ฒ ๋,,! ํ๋ด๋ณด์๐ซ