{"id":257,"date":"2025-11-19T14:30:00","date_gmt":"2025-11-19T05:30:00","guid":{"rendered":"https:\/\/hed-g.me\/?p=257"},"modified":"2025-10-28T16:18:53","modified_gmt":"2025-10-28T07:18:53","slug":"%eb%8d%b0%ec%9d%b4%ed%84%b0-%eb%9d%bc%ec%9d%b4%ed%94%84%ec%82%ac%ec%9d%b4%ed%81%b4","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=257","title":{"rendered":"\ub370\uc774\ud130 \ub77c\uc774\ud504\uc0ac\uc774\ud074"},"content":{"rendered":"\n

\ub370\uc774\ud130 \ub77c\uc774\ud504\uc0ac\uc774\ud074(Data Lifecycle)\uc740 \ud55c \ubc88 \uc694\uccad\ub41c \ub370\uc774\ud130\uac00 <\/strong>
\uc571 \uc548\uc5d0\uc11c \uc5b4\ub5bb\uac8c \ud758\ub7ec\uac00\uace0, \uc5b4\ub5bb\uac8c \uac31\uc2e0\ub418\uace0, \uc5b8\uc81c \ud3d0\uae30\ub418\ub294\uc9c0<\/strong>\ub97c \uc758\ubbf8\ud55c\ub2e4.<\/p>\n\n\n\n

\ub2e8\uc21c\ud788 \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubd88\ub7ec\uc624\ub294\uac8c \uc544\ub2c8\ub77c,
\uadf8 \uc774\ud6c4\uc758 \uc5ec\ub7ec \ub2e8\uacc4\ub97c \ud3ec\ud568\ud55c\ub2e4.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

\ub77c\uc774\ud504\uc0ac\uc774\ud074<\/h2>\n\n\n\n

Fetch(\ub370\uc774\ud130 \uc694\uccad)<\/h3>\n\n\n\n

\ud074\ub77c\uc774\uc5b8\ud2b8(\ube0c\ub77c\uc6b0\uc800)\uac00 \uc11c\ubc84\ub85c \uc694\uccad,\uc11c\ubc84\ub294 JSON, HTML \ub4f1 \ub370\uc774\ud130\ub97c \uc751\ub2f5\ud55c\ub2e4.<\/p>\n\n\n\n

\uc774 \uc2dc\uc810\uc5d0\uc11c\ub294 \ub370\uc774\ud130\uac00 \uc544\uc9c1 \uc5c6\uc73c\ubbc0\ub85c UI\uc5d0\uc11c\ub294 \ub85c\ub529 \uc0c1\ud0dc\ub97c \ubcf4\uc5ec\uc900\ub2e4.
<\/p>\n\n\n\n

<\/p>\n\n\n\n

Cache(\ub370\uc774\ud130 \uc800\uc7a5)<\/h3>\n\n\n\n

\ub370\uc774\ud130\ub97c \ubc1b\uc544\uc654\ub2e4\uba74, \ub9e4\ubc88 \uc0c8\ub85c \uc694\uccad\ud558\uc9c0 \uc54a\uae30 \uc704\ud574 \uc784\uc2dc \uc800\uc7a5\uc774 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n

\ube0c\ub77c\uc6b0\uc800 \uba54\ubaa8\ub9ac, IndexedDB, SWR\/ReactQuery\uc758 \ub0b4\ubd80 \uce90\uc2dc \ub4f1 \ub2e4\uc591\ud55c \uc800\uc7a5 \uc704\uce58\uc5d0 \uac00\ub2a5\ud558\uba70,<\/p>\n\n\n\n

\uce90\uc2f1\ub41c \ub370\uc774\ud130\ub294 \uc989\uc2dc \uc7ac\uc0ac\uc6a9 \uac00\ub2a5.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Render(UI \ubc18\uc601)<\/h3>\n\n\n\n

\ubc1b\uc740 \ub370\uc774\ud130\ub97c \uae30\ubc18\uc73c\ub85c \ud654\uba74(UI)\uc744 \uadf8\ub9b0\ub2e4.<\/p>\n\n\n\n

\uc11c\ubc84 \uc751\ub2f5 \u2192 \uc0c1\ud0dc(state) \u2192 UI\uc758 \uc5f0\uacb0\uc774 \uc644\uc131\ub420 \ub54c, React\uc5d0\uc11c\ub294 useState, useSWR \ub4f1\uc774<\/p>\n\n\n\n

\uc774 \ud30c\ud2b8\uc5d0 \uad00\uc5ec\ud55c\ub2e4.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Revalidate(\ub370\uc774\ud130 \ucd5c\uc2e0\ud654)<\/h3>\n\n\n\n

\uc2dc\uac04\uc774 \uc9c0\ub098\uba74 \ub370\uc774\ud130\ub294 \uc624\ub798\ub41c(stale) \uc0c1\ud0dc\uac00 \ub41c\ub2e4.<\/p>\n\n\n\n

\uc774\ub54c, SWR \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \uc790\ub3d9\uc73c\ub85c \uc7ac\uc694\uccad\uc744 \ubcf4\ub0b4 \ucd5c\uc2e0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc628\ub2e4.<\/p>\n\n\n\n

\uc7ac\uac80\uc99d\uc774 \ubc1c\uc0dd\ud558\ub294 \uc2dc\uc810\uc740 \ub2e4\uc591\ud558\ub2e4:<\/p>\n\n\n\n

    \n
  • \uc77c\uc815\uc2dc\uac04\uc774 \uc9c0\ub09c \uacbd\uc6b0(staleTime \uc774\ud6c4)<\/li>\n\n\n\n
  • \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc744 \ub2e4\uc2dc \ud65c\uc131\ud654\ud588\uc744 \ub54c(focus event)<\/li>\n\n\n\n
  • \ub124\ud2b8\uc6cc\ud06c\uac00 \uc7ac\uc5f0\uacb0\ub410\uc744 \ub54c(reconnect event)<\/li>\n<\/ul>\n\n\n\n

    SWR\ub294 \uc774\ub7ec\ud55c \uc7ac\uac80\uc99d\uc744 \uc790\ub3d9\uc73c\ub85c \ucc98\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Mutate(\ub370\uc774\ud130 \uc218\uc815)<\/h3>\n\n\n\n

    \uc0ac\uc6a9\uc790\uac00 \ub370\uc774\ud130\ub97c \uc218\uc815(e.g. \ub313\uae00 \ub4f1\ub85d)\ud560 \ub54c\ub294<\/p>\n\n\n\n

    UI\ub97c \uc989\uc2dc \uc5c5\ub370\uc774\ud2b8 \ud558\ub418, \uc11c\ubc84 \ub370\uc774\ud130\ub3c4 \ub098\uc911\uc5d0 \ub3d9\uae30\ud654\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n

    \uc774\ub97c \ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8(Optimistic UI)<\/strong>\ub77c\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n

    \uc0ac\uc6a9\uc790\ub294 \ube60\ub978 \ud53c\ub4dc\ubc31\uc744 \ubc1b\uace0, SWR\uc740 \uc774\ud6c4 \uc790\ub3d9\uc73c\ub85c \uc11c\ubc84 \ub370\uc774\ud130\ub97c \ub2e4\uc2dc \ubc1b\uc544 \ub3d9\uae30\ud654\ud55c\ub2e4.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    <\/p>\n\n\n\n

    *\ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8(Optimistic UI)<\/p>\n\n\n\n

    \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1 \uc2dc\ud0a4\uae30 \uc704\ud574, \uc0ac\uc6a9\uc790\uc758 \ub3d9\uc791\uc5d0 \ub300\ud55c<\/p>\n\n\n\n

    \uc751\ub2f5\uc744 \uae30\ub2e4\ub9ac\uc9c0 \uc54a\uace0 \ubbf8\ub9ac UI\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\ub294 \uac83.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Invalidate(\ub370\uc774\ud130 \ud3d0\uae30)<\/h3>\n\n\n\n

    \ub370\uc774\ud130\uac00 \uc624\ub798\ub418\uac70\ub098, \ub2e4\ub978 \uc694\uccad\uc73c\ub85c \uc778\ud574 \ubb34\ud6a8\ud654\ub418\uc5b4\uc57c \ud560 \ub54c\ub294 \uce90\uc2dc\ub97c \uc9c0\uc6b4\ub2e4.<\/p>\n\n\n\n

    e.g. \ub85c\uadf8\uc544\uc6c3 \uc2dc \uc0ac\uc6a9\uc790 \uc815\ubcf4 \uce90\uc2dc \uc0ad\uc81c<\/p>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    \ub370\uc774\ud130 \ub77c\uc774\ud504\uc0ac\uc774\ud074(Data Lifecycle)\uc740 \ud55c \ubc88 \uc694\uccad\ub41c \ub370\uc774\ud130\uac00 \uc571 \uc548\uc5d0\uc11c \uc5b4\ub5bb\uac8c \ud758\ub7ec\uac00\uace0, \uc5b4\ub5bb\uac8c \uac31\uc2e0\ub418\uace0, \uc5b8\uc81c \ud3d0\uae30\ub418\ub294\uc9c0\ub97c \uc758\ubbf8\ud55c\ub2e4. \ub2e8\uc21c\ud788 \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubd88\ub7ec\uc624\ub294\uac8c \uc544\ub2c8\ub77c, \uadf8 \uc774\ud6c4\uc758 \uc5ec\ub7ec \ub2e8\uacc4\ub97c \ud3ec\ud568\ud55c\ub2e4. \ub77c\uc774\ud504\uc0ac\uc774\ud074 Fetch(\ub370\uc774\ud130 \uc694\uccad) \ud074\ub77c\uc774\uc5b8\ud2b8(\ube0c\ub77c\uc6b0\uc800)\uac00 \uc11c\ubc84\ub85c \uc694\uccad,\uc11c\ubc84\ub294 JSON, HTML \ub4f1 \ub370\uc774\ud130\ub97c \uc751\ub2f5\ud55c\ub2e4. \uc774 \uc2dc\uc810\uc5d0\uc11c\ub294 \ub370\uc774\ud130\uac00 \uc544\uc9c1 \uc5c6\uc73c\ubbc0\ub85c UI\uc5d0\uc11c\ub294 \ub85c\ub529 \uc0c1\ud0dc\ub97c \ubcf4\uc5ec\uc900\ub2e4. Cache(\ub370\uc774\ud130 \uc800\uc7a5) \ub370\uc774\ud130\ub97c \ubc1b\uc544\uc654\ub2e4\uba74, \ub9e4\ubc88 \uc0c8\ub85c \uc694\uccad\ud558\uc9c0 \uc54a\uae30 \uc704\ud574 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[41],"tags":[187,186,185],"class_list":["post-257","post","type-post","status-publish","format-standard","hentry","category-computer-science","tag-dlm","tag-186","tag-185"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=257"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/257\/revisions"}],"predecessor-version":[{"id":259,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/257\/revisions\/259"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}