ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

web/react hook

useOptimistic

dev_been94 2024. 12. 14. 15:36
728x90
๋ฐ˜์‘ํ˜•

useOptimistic

 

๐ŸŽฏ useOptimistic์ด๋ž€ ๋ฌด์—‡์ผ๊นŒ์š”?

**useOptimistic**์€ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ํ–‰๋™์„ ํ–ˆ์„ ๋•Œ ์‹ค์ œ๋กœ ์ž‘์—…์ด ์™„๋ฃŒ๋˜๊ธฐ ์ „์— ๊ฒฐ๊ณผ๋ฅผ ๋ฏธ๋ฆฌ ๋ณด์—ฌ์ฃผ๋Š” ํ›…์ด์—์š”.
"๋‚™๊ด€์ "์ด๋ผ๋Š” ๋œป์ฒ˜๋Ÿผ, ์„ฑ๊ณตํ•  ๊ฑฐ๋ผ๊ณ  ๊ฐ€์ •ํ•˜๊ณ  ๋ฏธ๋ฆฌ ํ™”๋ฉด์— ๋ฐ˜์˜ํ•˜๋Š” ๊ฑฐ์ฃ .

์™œ ์ด๋Ÿฐ ๊ฒŒ ํ•„์š”ํ• ๊นŒ์š”?
๋„คํŠธ์›Œํฌ ์š”์ฒญ(์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ ๋ณด๋‚ด๊ธฐ)์€ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ์ž–์•„์š”? โณ

  • ๊ทธ ๊ธฐ๋‹ค๋ฆฌ๋Š” ๋™์•ˆ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•„๋ฌด๋Ÿฐ ๋ณ€ํ™”๋„ ๋ณด์—ฌ์ฃผ์ง€ ์•Š์œผ๋ฉด ๋ถˆํŽธํ•˜๊ฒ ์ฃ .
  • ๊ทธ๋ž˜์„œ ๊ฒฐ๊ณผ๊ฐ€ ๊ณง ์„ฑ๊ณตํ•  ๊ฑฐ๋ผ๊ณ  ๋ฏฟ๊ณ  ํ™”๋ฉด์„ ๋จผ์ € ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฑฐ์˜ˆ์š”!

 

๐Ÿ” ํ–„๋ฒ„๊ฑฐ ๊ฐ€๊ฒŒ ์ด์•ผ๊ธฐ๋กœ ์ดํ•ดํ•ด๋ณด๊ธฐ

์—ฌ๋Ÿฌ๋ถ„์ด ํ–„๋ฒ„๊ฑฐ ๊ฐ€๊ฒŒ์— ๊ฐ”๋‹ค๊ณ  ์ƒ์ƒํ•ด ๋ณผ๊ฒŒ์š”. ๐Ÿ”

  1. ์ฃผ๋ฌธ์„ ํ•˜๋ฉด ์ง์›์ด "์ž ์‹œ๋งŒ ๊ธฐ๋‹ค๋ ค ์ฃผ์„ธ์š”~"๋ผ๊ณ  ๋งํ•˜์ง€๋งŒ,
  2. ๋ฐ”๋กœ ์˜์ˆ˜์ฆ์— "์ฃผ๋ฌธ ์™„๋ฃŒ"๋ผ๊ณ  ์ถœ๋ ฅ๋ผ์š”.
  3. ์‹ค์ œ๋กœ ํ–„๋ฒ„๊ฑฐ๋ฅผ ๋งŒ๋“ค๊ณ  ์žˆ๊ธด ํ•˜์ง€๋งŒ, ์ง์›์€ ๋ฏธ๋ฆฌ ์ฃผ๋ฌธ์„ ์™„๋ฃŒํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ์ฒ˜๋ฆฌํ•ด ์ค๋‹ˆ๋‹ค.

**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;

 

๐Ÿ” ์ฝ”๋“œ ์„ค๋ช…

  1. useOptimistic
    • comments๋ฅผ ๊ธฐ๋ณธ ์ƒํƒœ๋กœ ๋ฐ›์•„์™€์„œ,
    • ์‚ฌ์šฉ์ž๊ฐ€ "๋Œ“๊ธ€ ์ถ”๊ฐ€" ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ๋ฏธ๋ฆฌ ํ™”๋ฉด์— ๋ฐ˜์˜ํ•ด์š”.
  2. addOptimisticComment
    • ์‹ค์ œ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด๊ธฐ ์ „์— ํ™”๋ฉด์— ๋จผ์ € ์ถ”๊ฐ€๋œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.
  3. ์„œ๋ฒ„ ์š”์ฒญ
    • fakeServerRequest๋ฅผ ํ†ตํ•ด 2์ดˆ ๋™์•ˆ ๊ธฐ๋‹ค๋ฆฌ์ง€๋งŒ,
    • ํ™”๋ฉด์—๋Š” ์ด๋ฏธ ๋Œ“๊ธ€์ด ์ถ”๊ฐ€๋œ ์ƒํƒœ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.
  4. ์ตœ์ข… ์—…๋ฐ์ดํŠธ
    • ์„œ๋ฒ„ ์š”์ฒญ์ด ์„ฑ๊ณตํ•˜๋ฉด setComments๋ฅผ ํ†ตํ•ด ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.

 

๐Ÿงฉ useOptimistic์ด ์™œ ํ•„์š”ํ• ๊นŒ์š”?

  1. ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX) ํ–ฅ์ƒ
    • ์š”์ฒญ ์ฒ˜๋ฆฌ ์‹œ๊ฐ„์ด ๊ธธ์–ด๋„ ํ™”๋ฉด์ด ๋น ๋ฅด๊ฒŒ ๋ฐ˜์‘ํ•˜๋‹ˆ๊นŒ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ์ข‹์•„์ ธ์š”.
  2. ๋‚™๊ด€์  UI ์—…๋ฐ์ดํŠธ
    • ์„ฑ๊ณตํ•  ๊ฒƒ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•˜๊ณ  ํ™”๋ฉด์„ ๋ฏธ๋ฆฌ ์—…๋ฐ์ดํŠธํ•ด ์ค๋‹ˆ๋‹ค.
  3. ๊ฐ„ํŽธํ•œ ์ฝ”๋“œ ์ž‘์„ฑ
    • useOptimistic์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ธฐ์กด ์ƒํƒœ๋ฅผ ๊ทธ๋Œ€๋กœ ๋‘๊ณ ,
      ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ๋งŒ ์ถ”๊ฐ€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๊ฐ€ ๊น”๋”ํ•ด์š”.

 

๐Ÿšจ ์ฃผ์˜ํ•  ์ 

  • ์š”์ฒญ์ด ์‹คํŒจํ–ˆ์„ ๋•Œ์˜ ์ฒ˜๋ฆฌ
    • ์„œ๋ฒ„ ์š”์ฒญ์ด ์‹คํŒจํ•˜๋ฉด ํ™”๋ฉด์— ๋ฏธ๋ฆฌ ๋ฐ˜์˜๋œ ๋‚ด์šฉ์„ ๋˜๋Œ๋ ค์•ผ ํ•  ์ˆ˜ ์žˆ์–ด์š”.
    • useOptimistic์€ "ํ™”๋ฉด์— ๋จผ์ € ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ"๋งŒ ๋‹ด๋‹นํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ์‹คํŒจ ์‹œ ์ฒ˜๋ฆฌ๋„ ์ง์ ‘ ํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 

๐ŸŒŸ ํ•œ ์ค„ ์š”์•ฝ

useOptimistic์€ ์„œ๋ฒ„ ์š”์ฒญ์ด ์ฒ˜๋ฆฌ๋˜๊ธฐ ์ „์— ํ™”๋ฉด์— ๊ฒฐ๊ณผ๋ฅผ ๋ฏธ๋ฆฌ ๋ณด์—ฌ์ค˜์„œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๋Š” React ํ›…์ด์—์š”.

728x90
๋ฐ˜์‘ํ˜•

'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
๋งํฌ
ยซ   2025/02   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
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
๊ธ€ ๋ณด๊ด€ํ•จ
๋ฐ˜์‘ํ˜•
250x250