{"id":879,"date":"2023-10-14T13:20:08","date_gmt":"2023-10-14T04:20:08","guid":{"rendered":"https:\/\/nangchang.nes.or.kr\/?p=879"},"modified":"2025-06-24T00:26:16","modified_gmt":"2025-06-23T15:26:16","slug":"react-query-%eb%a6%ac%eb%a0%8c%eb%8d%94%eb%a7%81-%ec%8b%9c-usemutation-%ec%9d%98-%eb%8f%99%ec%9e%91%ea%b3%bc-%ec%a3%bc%ec%9d%98%ec%82%ac%ed%95%ad","status":"publish","type":"post","link":"https:\/\/nangchang.nes.or.kr\/?p=879","title":{"rendered":"[react-query] \ub9ac\ub80c\ub354\ub9c1 \uc2dc useMutation \uc758 \ub3d9\uc791\uacfc \uc8fc\uc758\uc0ac\ud56d"},"content":{"rendered":"\n

useMutation \uc740 useEffect, useCallback \uac19\uc740 hook \uacfc\ub294 \ub2e4\ub974\uac8c \uc758\uc874\uc131\uc744 \uc124\uc815\ud560 \uc218 \uc5c6\ub2e4. \uadf8\ub7fc, \ub9ac\ub80c\ub354\ub9c1 \uc2dc\uc5d0 useMutation\uc5d0\uc11c \ubc18\ud658\ub418\ub294 mutate() \ub294 \ud56d\uc0c1 \uc0c8\ub85c \ub9cc\ub4e4\uc5b4 \uc9c0\ub294 \uac78\uae4c?<\/p>\n\n\n\n

useMutation \uc5d0 \ud30c\ub77c\uba54\ud130\ub85c \ub118\uae30\ub294 mutaionFn, onMutate, onSettled, onSuccess \ub4f1\uc774 \ub9ac\ub80c\ub354\ub9c1 \uc2dc \ubcc0\uacbd\ub420 \uacbd\uc6b0, mutate() \ub97c \ud638\ucd9c \ud558\uba74 \uac01 \uc0c1\ud669\uc5d0\uc11c \ubcc0\uacbd\ub41c \ud568\uc218\uac00 \ud638\ucd9c\ub418\ub294 \uac83\uc73c\ub85c \ubd10\uc11c \uadf8\ub7f4 \uc218\ub3c4 \uc788\uc5b4 \ubcf4\uc778\ub2e4.<\/p>\n\n\n\n

\uadf8\ub807\ub2e4\uba74 mutate() \ub97c \ud638\ucd9c \ud574\uc11c mutationFn \uc774 \uc774\ubbf8 \uc2e4\ud589 \uc911\uc778 \uc0c1\ud669\uc5d0\uc11c \ub9ac\ub80c\ub354\ub9c1\uc774 \uc77c\uc5b4\ub098 onSuccess \ub4f1\uc774 \ubcc0\uacbd \ub418\uace0, \uadf8 \ud6c4 mutationFn \uc758 \uc2e4\ud589\uc774 \uc644\ub8cc\ub41c\ub2e4\uba74 \uc5b4\ub5bb\uac8c \ub420\uae4c? mutationFn \uc774 \uc131\uacf5\uc801\uc73c\ub85c \uc218\ud589\ub41c \ud6c4 \ud638\ucd9c \ub418\ub294 onSuccess \ub294 \uc55e\uc11c mutate() \uac00 \ud638\ucd9c \ub418\uc5c8\uc744 \ub2f9\uc2dc\uc758 onSuccess \ud568\uc218\uac00 \uc544\ub2c8\ub77c \ub9ac\ub80c\ub354\ub9c1 \uc911 \ubcc0\uacbd\ub41c onSuccess \ud568\uc218\uac00 \ud638\ucd9c\ub41c\ub2e4.<\/p>\n\n\n\n

<\/div>\n\n\n\n

\uc2e4\uc81c react-query \uac00 \uc5b4\ub5bb\uac8c \uad6c\ud604\ub418\uc5b4 \uc788\ub294\uc9c0 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n

  const [observer] = React.useState(\n    () =>\n      new MutationObserver<TData, TError, TVariables, TContext>(\n        queryClient,\n        options,\n      ),\n  )<\/code><\/pre>\n\n\n\n
useMutation \uc758 \uad6c\ud604\uc744 \ubcf4\uba74 observer \ub77c\ub294 state \ub97c \ub9cc\ub4e4\uc5b4 \uc4f0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
  React.useEffect(() => {\n    observer.setOptions(options)\n  }, [observer, options])<\/code><\/pre>\n\n\n\n
useMutation \uc5d0 \ud30c\ub77c\uba54\ud130\ub85c \ub118\uc5b4\uac00\ub294 \uc635\uc158\uc774 \ubcc0\uacbd\ub420 \uacbd\uc6b0, \uc774 observer state \uc758 setOptions() \ub97c \ud638\ucd9c \ud558\uc5ec \ubcc0\uacbd\ud574 \uc8fc\uac8c\ub418\uba70,<\/p>\n\n\n\n
  const mutate = React.useCallback<\n    UseMutateFunction<TData, TError, TVariables, TContext>\n  >(\n    (variables, mutateOptions) => {\n      observer.mutate(variables, mutateOptions).catch(noop)\n    },\n    [observer],\n  )\n<\/code><\/pre>\n\n\n\n
\uc6b0\ub9ac\uac00 useMutation() \uc758 \uacb0\uacfc\ub85c \ubc18\ud658\ubc1b\ub294 mutate \ub294 useCallback() \uc744 \uc0ac\uc6a9\ud558\uc5ec \ub9cc\ub4dc\ub294\ub370, \uc758\uc874\uc131 \ubaa9\ub85d\uc5d0\ub294 observer \ub9cc \ub4e4\uc5b4\uac00 \uc788\uc5b4 mutate \ub294 \uc0c8\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n
\uc880 \ub354 \uc548 \ucabd\uc744 \uc0b4\ud3b4 \ubcf4\uc790. observer \uc758 mutate() \ub97c \ud638\ucd9c \ud588\uc744\ub54c, \uc989, \uc6b0\ub9ac\uac00 useMutation()\uc5d0\uc11c \ubc18\ud658 \ubc1b\uc740 mutate() \ud568\uc218\ub97c \ud638\ucd9c \ud588\uc744 \ub54c \ubb34\uc2a8\uc77c\uc774 \uc77c\uc5b4\ub098\ub294\uac78\uae4c?<\/p>\n\n\n\n
  mutate(\n    variables?: TVariables,\n    options?: MutateOptions<TData, TError, TVariables, TContext>,\n  ): Promise<TData> {\n    this.mutateOptions = options\n\n    if (this.currentMutation) {\n      this.currentMutation.removeObserver(this)\n    }\n\n    this.currentMutation = this.client.getMutationCache().build(this.client, {\n      ...this.options,\n      variables:\n        typeof variables !== 'undefined' ? variables : this.options.variables,\n    })\n\n    this.currentMutation.addObserver(this)\n\n    return this.currentMutation.execute()\n  }<\/code><\/pre>\n\n\n\n
mutate() \uac00 \ud638\ucd9c \ub418\ub294 \uc2dc\uc810\uc5d0 \ud604\uc7ac\uc758 \uc635\uc158\uc744 \ub118\uaca8\uc11c Mutation \uac1d\uccb4\ub97c \uc0c8\ub85c \ub9cc\ub4e4\uace0, \ub9c8\uc9c0\ub9c9\uc5d0 Mutation.execute() \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc900\ub2e4.<\/p>\n\n\n\n
async execute(): Promise<TData> {\n    const executeMutation = () => {\n      this.retryer = createRetryer({\n        fn: () => {\n          if (!this.options.mutationFn) {\n            return Promise.reject('No mutationFn found')\n          }\n          return this.options.mutationFn(this.state.variables!)\n        },\n...\n      })\n\n      return this.retryer.promise\n    }\n\n...\n      const data = await executeMutation()\n\n      \/\/ Notify cache callback\n      await this.mutationCache.config.onSuccess?.(\n        data,\n        this.state.variables,\n        this.state.context,\n        this as Mutation<unknown, unknown, unknown, unknown>,\n      )\n...\n  }<\/code><\/pre>\n\n\n\n
Mutation.execute() \ub294 \uc0dd\uc131 \uc2dc \ub118\uaca8 \ubc1b\uc558\ub358 options\uc758 mutationFn \uc744 \ud638\ucd9c \ud558\uace0, \uadf8 \uacb0\uacfc\uc5d0 \ub530\ub77c onSuccess \ub4f1\uc744 \ud638\ucd9c \ud574 \uc900\ub2e4.<\/p>\n\n\n\n
\uc5ec\uae30\uae4c\uc9c0 \ubd24\uc744\ub54c\ub294, mutate() \ud638\ucd9c \uc2dc \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uace0, \ud544\uc694\ud55c \uc815\ubcf4\ub294 \ud574\ub2f9 \uac1d\uccb4\uac00 \ub2e4 \uac00\uc9c0\uace0 \uc788\ub294 \ud615\ud0dc\uc774\ubbc0\ub85c \uc774\ud6c4, useMutation() \uc774 \uc0c8\ub85c \ud638\ucd9c\ub418\uace0 \uc635\uc158\uc774 \ubc14\ub00c\ub354\ub77c\ub3c4, \ud604\uc7ac \uc2e4\ud589\uc911\uc778 mutate \uc5d0\ub294 \uc601\ud5a5\uc744 \ubbf8\uce58\uc9c0 \uc54a\uc744 \uac83\uc73c\ub85c \ubcf4\uc778\ub2e4.<\/p>\n\n\n\n
\uadf8\ub7f0\ub370 \uc544\uc9c1 \ubcf4\uc9c0 \ubabb\ud55c \uacf3\uc774 \uc788\ub2e4. observer\uc758 setOptons().<\/p>\n\n\n\n
  setOptions(\n    options?: MutationObserverOptions<TData, TError, TVariables, TContext>,\n  ) {\n    const prevOptions = this.options\n    this.options = this.client.defaultMutationOptions(options)\n    if (!shallowEqualObjects(prevOptions, this.options)) {\n      this.client.getMutationCache().notify({\n        type: 'observerOptionsUpdated',\n        mutation: this.currentMutation,\n        observer: this,\n      })\n    }\n    this.currentMutation?.setOptions(this.options)\n  }<\/code><\/pre>\n\n\n\n
\ubb54\uac00 \uc774\uc720\uac00 \uc788\uaca0\uc9c0\ub9cc, \uac1c\uc778\uc801\uc73c\ub85c\ub294 \uc880 \uc758\uc544\ud55c\ub370… \ub9c8\uc9c0\ub9c9\uc5d0 \ud604\uc7ac mutation, \uc989, \ub9c8\uc9c0\ub9c9\uc73c\ub85c mutate() \ud638\ucd9c\ub420 \ub2f9\uc2dc\uc758 mutation \uac1d\uccb4\uc758 \uc635\uc158\uc744 \uac19\uc774 \ubc14\uafd4\uc900\ub2e4.<\/p>\n\n\n\n
\uc774\ub85c\uc778\ud574, mutaionFn \uc774 \uc2e4\ud589 \uc911 useMutation\uc758 \uc635\uc158\uc774 \ubc14\ub00c\uac8c \ub418\uba74, mutationFn \uc774 \ub05d\ub09c \ud6c4 \ucc98\ub9ac\ub294 \ubc14\ub010 \uc635\uc158\ub300\ub85c \ud558\uac8c\ub418\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n
\uc5ec\uae30\uc11c useMutation() \uc0ac\uc6a9\ud560\ub54c \ud55c \uac00\uc9c0 \uc8fc\uc758 \uc0ac\ud56d\uc774 \uc0dd\uae34\ub2e4. mutate()\ub97c \ud638\ucd9c\ud55c \ud6c4 useMutation()\uc758 \uc635\uc158\uc774 \ubcc0\ud558\ub294 \uacbd\uc6b0\uc5d0 \ub300\ud574 \uace0\ub824\ud558\ub77c\ub294 \uac83.<\/p>\n\n\n\n
\uc758\ub3c4\ud55c\uac8c \uc544\ub2c8\ub77c\uba74, mutate() \ud638\ucd9c\uc774 \uc644\ub8cc\ub418\uae30 \uc804\uc5d0 useMutation() \uc758 \uc635\uc158\uc774 \ubcc0\uacbd\ub41c\ub294 \uc0c1\ud669\uc740 \ub9c9\uc544\uc57c \ud55c\ub2e4. \ubcf4\ud1b5 react-query \ub97c \uc0ac\uc6a9\ud558\ub294 \ubaa9\uc801\uc744 \uc0dd\uac01\ud574\ubcf4\uba74, mutationFn \uc744 API \ud638\ucd9c \uc791\uc5c5\uc77c \uac83\uc774\uace0, \ud574\ub2f9 \uc791\uc5c5\uc740 \uc11c\ubc84\ub098 \ub124\ud2b8\uc6cc\ud06c \uc0c1\ud669 \ub4f1\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \ub290\ub9ac\uac8c \ub05d\ub0a0 \uac00\ub2a5\uc131\uc774 \uc788\ub2e4. \uadf8\ub9ac\uace0, \uadf8 \uc0ac\uc774 useMutation()\uc758 \uc635\uc158\uc5d0 \uc601\ud5a5\uc744 \uc8fc\ub294 state \uac00 \ubcc0\uacbd\ub418\uc5b4 \ub9ac\ub80c\ub354\ub9c1\uc774 \uc77c\uc5b4\ub098\uba74, mutationFn \uc774 \uc644\ub8cc\ub418\uc5c8\uc744 \ub54c\ub294 \uc758\ub3c4\uce58 \uc54a\uc740 \uc791\uc5c5\uc774 \uc218\ud589\ub420 \uc218 \uc788\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
useMutation \uc740 useEffect, useCallback \uac19\uc740 hook \uacfc\ub294 \ub2e4\ub974\uac8c \uc758\uc874\uc131\uc744 \uc124\uc815\ud560 \uc218 \uc5c6\ub2e4. \uadf8\ub7fc, \ub9ac\ub80c\ub354\ub9c1 \uc2dc\uc5d0 useMutation\uc5d0\uc11c \ubc18\ud658\ub418\ub294 mutate() \ub294 \ud56d\uc0c1 \uc0c8\ub85c \ub9cc\ub4e4\uc5b4 \uc9c0\ub294 \uac78\uae4c? useMutation \uc5d0 \ud30c\ub77c\uba54\ud130\ub85c \ub118\uae30\ub294 mutaionFn, onMutate, onSettled, onSuccess \ub4f1\uc774 \ub9ac\ub80c\ub354\ub9c1 \uc2dc \ubcc0\uacbd\ub420 \uacbd\uc6b0, mutate() \ub97c \ud638\ucd9c \ud558\uba74 \uac01 \uc0c1\ud669\uc5d0\uc11c \ubcc0\uacbd\ub41c \ud568\uc218\uac00 \ud638\ucd9c\ub418\ub294 \uac83\uc73c\ub85c \ubd10\uc11c \uadf8\ub7f4 \uc218\ub3c4 \uc788\uc5b4 \ubcf4\uc778\ub2e4. \uadf8\ub807\ub2e4\uba74 mutate() \ub97c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[80,81,82],"class_list":["post-879","post","type-post","status-publish","format-standard","hentry","category-pogramming","tag-react","tag-react-query","tag-usemutation"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=879"}],"version-history":[{"count":3,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/879\/revisions"}],"predecessor-version":[{"id":910,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/879\/revisions\/910"}],"wp:attachment":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}