ํฐ์คํ ๋ฆฌ ๋ทฐ
๐ฏ useOptimistic์ด๋ ๋ฌด์์ผ๊น์?
**useOptimistic**์ ์ฌ์ฉ์๊ฐ ์ด๋ค ํ๋์ ํ์ ๋ ์ค์ ๋ก ์์
์ด ์๋ฃ๋๊ธฐ ์ ์ ๊ฒฐ๊ณผ๋ฅผ ๋ฏธ๋ฆฌ ๋ณด์ฌ์ฃผ๋ ํ
์ด์์.
"๋๊ด์ "์ด๋ผ๋ ๋ป์ฒ๋ผ, ์ฑ๊ณตํ ๊ฑฐ๋ผ๊ณ ๊ฐ์ ํ๊ณ ๋ฏธ๋ฆฌ ํ๋ฉด์ ๋ฐ์ํ๋ ๊ฑฐ์ฃ .
์ ์ด๋ฐ ๊ฒ ํ์ํ ๊น์?
๋คํธ์ํฌ ์์ฒญ(์๋ฒ์ ๋ฐ์ดํฐ ๋ณด๋ด๊ธฐ)์ ์๊ฐ์ด ๊ฑธ๋ฆฌ์์์? โณ
- ๊ทธ ๊ธฐ๋ค๋ฆฌ๋ ๋์ ์ฌ์ฉ์์๊ฒ ์๋ฌด๋ฐ ๋ณํ๋ ๋ณด์ฌ์ฃผ์ง ์์ผ๋ฉด ๋ถํธํ๊ฒ ์ฃ .
- ๊ทธ๋์ ๊ฒฐ๊ณผ๊ฐ ๊ณง ์ฑ๊ณตํ ๊ฑฐ๋ผ๊ณ ๋ฏฟ๊ณ ํ๋ฉด์ ๋จผ์ ์ ๋ฐ์ดํธํ๋ ๊ฑฐ์์!
๐ ํ๋ฒ๊ฑฐ ๊ฐ๊ฒ ์ด์ผ๊ธฐ๋ก ์ดํดํด๋ณด๊ธฐ
์ฌ๋ฌ๋ถ์ด ํ๋ฒ๊ฑฐ ๊ฐ๊ฒ์ ๊ฐ๋ค๊ณ ์์ํด ๋ณผ๊ฒ์. ๐
- ์ฃผ๋ฌธ์ ํ๋ฉด ์ง์์ด "์ ์๋ง ๊ธฐ๋ค๋ ค ์ฃผ์ธ์~"๋ผ๊ณ ๋งํ์ง๋ง,
- ๋ฐ๋ก ์์์ฆ์ "์ฃผ๋ฌธ ์๋ฃ"๋ผ๊ณ ์ถ๋ ฅ๋ผ์.
- ์ค์ ๋ก ํ๋ฒ๊ฑฐ๋ฅผ ๋ง๋ค๊ณ ์๊ธด ํ์ง๋ง, ์ง์์ ๋ฏธ๋ฆฌ ์ฃผ๋ฌธ์ ์๋ฃํ ๊ฒ์ฒ๋ผ ์ฒ๋ฆฌํด ์ค๋๋ค.
**useOptimistic**์ด ๋ฑ ์ด๋ฐ ์ญํ ์ด์์!
- ํ๋ฉด์์๋ "์ฃผ๋ฌธ์ด ์๋ฃ๋ ๊ฒ์ฒ๋ผ" ๋ฐ๋ก ๋ณด์ฌ์ฃผ๊ณ ,
- ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ค์ ์์ฒญ์ด ์ฒ๋ฆฌ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฝ๋๋ค.
๐ ๏ธ useOptimistic ์์ ์ฝ๋
๋๊ธ์ ์ถ๊ฐํ๋ ๊ธฐ๋ฅ์ ์๋ก ๋ค์ด ๋ณผ๊ฒ์.
์๋ฒ์ ๋๊ธ์ ๋ณด๋ด๋ ๋์ ํ๋ฉด์๋ "๋๊ธ์ด ์ถ๊ฐ๋ ๊ฒ์ฒ๋ผ" ๋จผ์ ๋ณด์ฌ์ค ๊ฑฐ์์.
import React, { useState, useOptimistic } from "react";
function CommentSection() {
const [comments, setComments] = useState([
{ id: 1, text: "์ฒซ ๋ฒ์งธ ๋๊ธ!" },
]);
// useOptimistic์ ์ฌ์ฉํด์ ํ๋ฉด์ ๋ฏธ๋ฆฌ ๋ฐ์
const [optimisticComments, addOptimisticComment] = useOptimistic(
comments, // ๊ธฐ์กด ์ํ
(currentComments, newComment) => [...currentComments, newComment] // ๋๊ด์ ์
๋ฐ์ดํธ
);
const handleAddComment = async () => {
const newComment = { id: Date.now(), text: "์๋ก์ด ๋๊ธ์
๋๋ค!" };
// ํ๋ฉด์ ๋จผ์ ๋ฐ์
addOptimisticComment(newComment);
// ์๋ฒ์ ์ค์ ๋ก ์์ฒญ ๋ณด๋ด๊ธฐ (๋น๋๊ธฐ ์ฒ๋ฆฌ)
await fakeServerRequest(newComment);
// ์์ฒญ์ด ์ฑ๊ณตํ๋ฉด ์ค์ ์ํ๋ ์
๋ฐ์ดํธ
setComments((prev) => [...prev, newComment]);
};
return (
<div>
<h3>๋๊ธ ๋ชฉ๋ก</h3>
<ul>
{optimisticComments.map((comment) => (
<li key={comment.id}>{comment.text}</li>
))}
</ul>
<button onClick={handleAddComment}>๋๊ธ ์ถ๊ฐ</button>
</div>
);
}
// ์๋ฒ์ ์์ฒญ์ ๋ณด๋ด๋ "๊ฐ์ง" ํจ์ (์ค์ ์์ฒญ์ด๋ผ๊ณ ๊ฐ์ )
function fakeServerRequest(comment) {
return new Promise((resolve) => {
setTimeout(() => {
console.log("์๋ฒ์ ๋๊ธ์ด ์ ์ฅ๋จ:", comment);
resolve();
}, 2000); // 2์ด ํ ์ฑ๊ณต
});
}
export default CommentSection;
๐ ์ฝ๋ ์ค๋ช
- useOptimistic
- comments๋ฅผ ๊ธฐ๋ณธ ์ํ๋ก ๋ฐ์์์,
- ์ฌ์ฉ์๊ฐ "๋๊ธ ์ถ๊ฐ" ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋ฏธ๋ฆฌ ํ๋ฉด์ ๋ฐ์ํด์.
- addOptimisticComment
- ์ค์ ์๋ฒ์ ์์ฒญ์ ๋ณด๋ด๊ธฐ ์ ์ ํ๋ฉด์ ๋จผ์ ์ถ๊ฐ๋ ๊ฒ์ฒ๋ผ ๋ณด์ฌ์ค๋๋ค.
- ์๋ฒ ์์ฒญ
- fakeServerRequest๋ฅผ ํตํด 2์ด ๋์ ๊ธฐ๋ค๋ฆฌ์ง๋ง,
- ํ๋ฉด์๋ ์ด๋ฏธ ๋๊ธ์ด ์ถ๊ฐ๋ ์ํ๋ก ๋ณด์ ๋๋ค.
- ์ต์ข
์
๋ฐ์ดํธ
- ์๋ฒ ์์ฒญ์ด ์ฑ๊ณตํ๋ฉด setComments๋ฅผ ํตํด ์ํ๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค.
๐งฉ useOptimistic์ด ์ ํ์ํ ๊น์?
- ์ฌ์ฉ์ ๊ฒฝํ(UX) ํฅ์
- ์์ฒญ ์ฒ๋ฆฌ ์๊ฐ์ด ๊ธธ์ด๋ ํ๋ฉด์ด ๋น ๋ฅด๊ฒ ๋ฐ์ํ๋๊น ์ฌ์ฉ์ ๊ฒฝํ์ด ์ข์์ ธ์.
- ๋๊ด์ UI ์
๋ฐ์ดํธ
- ์ฑ๊ณตํ ๊ฒ์ด๋ผ๊ณ ๊ฐ์ ํ๊ณ ํ๋ฉด์ ๋ฏธ๋ฆฌ ์ ๋ฐ์ดํธํด ์ค๋๋ค.
- ๊ฐํธํ ์ฝ๋ ์์ฑ
- useOptimistic์ ์ฌ์ฉํ๋ฉด ๊ธฐ์กด ์ํ๋ฅผ ๊ทธ๋๋ก ๋๊ณ ,
๋๊ด์ ์ ๋ฐ์ดํธ๋ง ์ถ๊ฐํ๊ธฐ ๋๋ฌธ์ ์ฝ๋๊ฐ ๊น๋ํด์.
- useOptimistic์ ์ฌ์ฉํ๋ฉด ๊ธฐ์กด ์ํ๋ฅผ ๊ทธ๋๋ก ๋๊ณ ,
๐จ ์ฃผ์ํ ์
- ์์ฒญ์ด ์คํจํ์ ๋์ ์ฒ๋ฆฌ
- ์๋ฒ ์์ฒญ์ด ์คํจํ๋ฉด ํ๋ฉด์ ๋ฏธ๋ฆฌ ๋ฐ์๋ ๋ด์ฉ์ ๋๋๋ ค์ผ ํ ์ ์์ด์.
- useOptimistic์ "ํ๋ฉด์ ๋จผ์ ๋ณด์ฌ์ฃผ๋ ๊ฒ"๋ง ๋ด๋นํ๊ธฐ ๋๋ฌธ์, ์คํจ ์ ์ฒ๋ฆฌ๋ ์ง์ ํด์ค์ผ ํฉ๋๋ค.
๐ ํ ์ค ์์ฝ
useOptimistic์ ์๋ฒ ์์ฒญ์ด ์ฒ๋ฆฌ๋๊ธฐ ์ ์ ํ๋ฉด์ ๊ฒฐ๊ณผ๋ฅผ ๋ฏธ๋ฆฌ ๋ณด์ฌ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ React ํ ์ด์์.
'web > react hook' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
useRef (0) | 2024.12.14 |
---|---|
useReducer (0) | 2024.12.14 |
useMemo (2) | 2024.12.14 |
useLayoutEffect (0) | 2024.12.14 |
useInsertionEffect (0) | 2024.12.14 |
- Total
- Today
- Yesterday
- ์ํ๊ด๋ฆฌ
- react dom
- react hook
- useformstatus
- ์คํ์
- experimental
- useid
- dns-prefetch
- usedeferredvalue
- experimental_taintuniquevalue
- react
- ์ต์ ๋ฐ์ดํฐ
- useRef
- finddomnode
- flushsync
- preconnect
- Props
- react dom hook
- ๋ฒ ํ
- ์ธ๋ถํฐํธ
- Store
- prefetchdns
- Nextjs
- useinsertioneffect
- ๋ฐ์ดํฐ์ ์ง
- ์ ์ฅ์
- experimental_taintobjectreference
- component
- zustand
- state
์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |