react \ub85c \uc11c\ube44\uc2a4\ub97c \uad6c\ud604\ud558\uba74\uc11c setState \uc758 \ube44\ub3d9\uae30\uc131 \ub54c\ubb38\uc5d0 \ub9ce\uc740 \uc5b4\ub824\uc6c0\uc744 \uacaa\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n
jquery \uc5d0 \uc775\uc219\ud574\uc11c \ub9ac\uc561\ud2b8\uc2a4\ub7fd\uc9c0 \uc54a\uc740 \ucf54\ub4dc \uc2a4\ud0c0\uc77c\uc774\uc5ec\uc11c \uadf8\ub7f0\uc9c0 \uad6c\uae00\ub9c1\ud574\ub3c4 \uc27d\uac8c \ucc3e\uc744 \uc218 \uc5c6\uc5b4 \uc815\ub9ac\ud574\ubcf4\ub824\uace0 \ud569\ub2c8\ub2e4.(\uacb0\uad6d \uad6c\uae00\ub9c1\ud55c \ub0b4\uc6a9\uc785\ub2c8\ub2e4.)<\/p>\n
list \uc5d0\uc11c \uccab\ubc88\uc9f8 list \ub97c \ubf51\uc544\uc11c first\uc5d0 \ub123\uace0 \ub2e4\uc2dc\ud55c\ubc88 \ub354 \ubf51\uc544\uc11c second\uc5d0 \ub123\ub294 \ucf54\ub4dc\ub97c \uc0dd\uac01\ud574\ubd05\uc2dc\ub2e4.<\/p>\n
const [list, setList] = useState(null);\r\nconst [first, setFirst] = useState(null);\r\nconst [second, setSecond] = useState(null);\r\n\r\nsetList([1,2,3]);\r\nsetFirst(list.shift(0)); \/\/Cannot read properties of undefined (reading 'shift')\r\nsetSecond(list.shift(0));<\/pre>\n\ub9ac\uc561\ud2b8\uc758 function \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c hook \uc911 \ud558\ub098\uc778 useState\ub294 \ube44\ub3d9\uae30\uc801\uc73c\ub85c \uc2e4\ud589\ub418\uc5b4 \ub9ac\ub79c\ub358\ub9c1\uc774 \ub41c \ud6c4\uc5d0 state \uac12\uc744 update \ud558\uae30 \ub54c\ubb38\uc5d0 \uc704\uc758 \ucf54\ub4dc\ub294 \uc2e4\ud589\uc2dc \uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/p>\n
react\uc5d0\uc11c\ub294 \ube44\ub3d9\uae30\uc131\uc744 \uc81c\uc5b4\ud558\uae30 \uc704\ud574 useEffect \ub97c \uc0ac\uc6a9\ud558\ub77c\uace0 \uac00\uc774\ub4dc \ud569\ub2c8\ub2e4.<\/p>\n
\uc704\uc758 \ucf54\ub4dc\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c\ub294 \uae08\ubc29 \uad6c\uae00\ub9c1\ud558\uba74 \uacb0\uacfc\ub97c \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
const [list, setList] = useState(null);\r\nconst [first, setFirst] = useState(null);\r\nconst [second, setSecond] = useState(null);\r\nuseEffect(()=>{\r\n setFirst(list.shift(0)); \r\n setSecond(list.shift(0));\r\n},list);\r\nsetList([1,2,3]);\r\n\r\n<\/pre>\n\ucf54\ub4dc\ub97c \ub9cc\ub4e4\ub2e4\ubcf4\uba74 callback \ucc98\ub9ac \uc5c6\uc774 \ubc14\ub85c list\uc758 \uac12\uc744 \uc81c\uc5b4\ud558\uace0 \uc2f6\uc744\ub54c\ub3c4 \ub9ce\uc774 \uc788\uc2b5\ub2c8\ub2e4.
\n\uadf8\ub7fc \uadf8\ub54c\ub9c8\ub2e4 useEffect \ud568\uc218 \uc18d\uc5d0\uc11c \ub85c\uc9c1\uc744 \uc218\ud589\ud574\uc57c\ud558\ub294 \ubd88\ud3b8\ud568\uc774 \uba38\ub9ac\uc18d\uc744 \ub5a0\ub098\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\uadf8\ub798\uc11c \uccab\ubc88\uc9f8 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc774 \uacc4\uc18d \uad81\uae08\ud588\uc2b5\ub2c8\ub2e4.
\n\uacb0\ub860\uc801\uc73c\ub85c function \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c\ub294 \uc704\uc758 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc740 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n\ub9ac\uc561\ud2b8\uc758 setSate\uc758 \uacbd\uc6b0 closure \ub85c useState\uc758 \ub450\ubc88\uc9f8 return \uac12\uc778 set \ud568\uc218\ub97c return \ud558\ub294\ub370 closure \ud2b9\uc131\uc0c1 \ud604\uc7ac \ub79c\ub354\ub9c1 \ub41c state(list=null)\ub97c \ubcf4\uae30 \ub54c\ubb38\uc5d0 \ub9ac\ub79c\ub354\ub9c1 \uc774\ud6c4 list \uc758 set \ud568\uc218\uac00 \ud638\ucd9c\ub418\uae30 \uc804\uae4c\uc9c0\ub294 \uacc4\uc18d null \uc785\ub2c8\ub2e4.
\nPromise\ub97c \uc0ac\uc6a9\ud558\uc5ec \uccb4\uc774\ub2dd \ud558\uc5ec \uc21c\uc11c\ub97c \uc81c\uc5b4\ud560 \uc218 \uc788\ub2e4\uace0 \ud569\ub2c8\ub2e4\ub9cc \uc5ec\uac04 \uae4c\ub2e4\ub85c\uc6b4\uac8c \uc544\ub2c8\ub124\uc694.
\nJquery \uae30\uc900\uc73c\ub85c \ubcf4\uba74 DOM\uc774 \ub80c\ub354\ub9c1 \ub418\ub294 \uc21c\uc11c\uc5d0 \ub530\ub77c event \ub97c \uc0dd\uc131\ud574\uc11c \ub85c\uc9c1\uc758 \uc2e4\ud589 \uc21c\uc11c\ub97c \uc81c\uc5b4\ud588\uc73c\ub098, react\uc758 \uacbd\uc6b0 react\uc758 lifecycle \uc744 \uc774\ud574\ud558\uace0 state \uc758 \ubcc0\ud654\ub97c \uc81c\uc5b4\ud574\uc57c\ud558\ub294 \uac83\uc774 \ubc88\uac70\ub7ec\uc6cc \ubcf4\uc785\ub2c8\ub2e4.<\/p>\n\uc774\ub7f0 \ubd88\ud3b8\ud568\uc744 \uc800\ub9cc \ub290\ub080\uac74 \uc544\ub2cc\uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\uad6c\uae00\ub9c1\ud574\uc11c \ucc3e\uc740 \uc5b4\ub5a4 \ube14\ub85c\uadf8\ub294 \uc774\ub7f0 \ubd88\ud3b8\ud568 \ub54c\ubb38\uc5d0 Mobx \ub77c\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud574\uc11c local \ubcc0\uc218\ub85c \uad00\ub9ac\ud55c\ub2e4\uace0 \ud569\ub2c8\ub2e4.<\/p>\n
<\/p>\n
\ub610 Mobx\ub77c\ub294 \ub77c\uc774\ube0c\ub7ec\ub77c\ub3c4 \uacf5\ubd80\ud574\uc57c\ud558\ub294\uad70\uc694.<\/p>\n
React\uc758 \ub9ce\uc740 \uc7a5\uc810\uc774 \uc788\uaca0\uc9c0\ub9cc React\uac00 \uac00\uc9c4 \ub2e8\uc810\uc744 \ucee4\ubc84\ud558\uae30 \uc704\ud55c \ub108\ubb34 \ub9ce\uc740 \ucd94\uac00\uc801\uc778 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud559\uc2b5\ud574\uc57c\ud558\ub294\uac8c \ub354 \ud070 \ub2e8\uc810\uc73c\ub85c \ub2e4\uac00\uc635\ub2c8\ub2e4.<\/p>\n
<\/p>\n
\ucc38\uace0 : https:\/\/zigsong.github.io\/2021\/10\/16\/fe-await-setstate\/<\/p>\n
https:\/\/simsimjae.tistory.com\/448<\/p>\n
React\uc5d0\uc11c Mobx \uacbd\ud5d8\uae30 (Redux\uc640 \ube44\uad50\uae30)<\/a><\/p><\/blockquote>\n