{"id":93,"date":"2025-07-16T14:55:22","date_gmt":"2025-07-16T05:55:22","guid":{"rendered":"http:\/\/34.64.61.65\/?p=93"},"modified":"2025-07-16T15:17:15","modified_gmt":"2025-07-16T06:17:15","slug":"__trashed-6","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=93","title":{"rendered":"React state"},"content":{"rendered":"\n
    \n
  1. state<\/li>\n<\/ol>\n\n\n\n

    \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \uc774\ubca4\ud2b8\uc5d0 \uc758\ud574 \ubcc0\uacbd\uc774 \uc77c\uc5b4\ub098\ub294 \ub3d9\uc801\uc778 \uac12.<\/p>\n\n\n\n

    \uac12\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc73c\uba70 \ubc18\ub4dc\uc2dc setState\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubcc0\uacbd<\/strong>\ud55c\ub2e4.<\/p>\n\n\n\n

    \u203b state \uc0ac\uc6a9\ud560 \ub54c \uc8fc\uc758\uc0ac\ud56d<\/p>\n\n\n\n

    \u2757state\uc5d0 \uc800\uc7a5\ub418\ub294 \uac1d\uccb4\ub294 \ubc18\ub4dc\uc2dc \ucd08\uae30\ud654(\uc0dd\uc131\uc790\uc5d0\uc11c \ucd08\uae30\ud654)<\/p>\n\n\n\n

    \u2757state \uac12\uc744 \uc784\uc758\ub85c \uc9c1\uc811 \ubcc0\uacbd\ud558\uc9c0 \ub9d0 \uac83, \ubc18\ub4dc\uc2dc state \uac12 \ubcc0\uacbd\uc2dc setState() \uc0ac\uc6a9.<\/p>\n\n\n\n

    \uc9c1\uc811 \ubcc0\uacbd\ud558\uba74 render \ud568\uc218\uac00 \ud638\ucd9c\ub418\uc9c0 \uc54a\uc544 \ub9ac\ub80c\ub354\ub9c1 \ubc1c\uc0dd X<\/p>\n\n\n\n

    1) \uc0ac\uc6a9\ubc95<\/p>\n\n\n\n

    (1) \uae30\ubcf8 \uc0ac\uc6a9: useState<\/p>\n\n\n\n

    \u2460 import useState<\/p>\n\n\n\n

    import { useState } from 'react';<\/code><\/pre>\n\n\n\n
    \u2461 declare useState()<\/p>\n\n\n\n
      \n
    • useState \uae30\ubcf8\ud615\ud0dc<\/li>\n<\/ul>\n\n\n\n
      const [state, setState] = useState(initialState);<\/code><\/pre>\n\n\n\n
        \n
      • state: \ud604\uc7ac \uc0c1\ud0dc<\/li>\n\n\n\n
      • setState: \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\ub294 setState \ud568\uc218 \ub9ac\ud134<\/li>\n\n\n\n
      • initialState: \uc0c1\ud0dc \ucd08\uae30\uac12. \uc0dd\ub7b5 \uac00\ub2a5<\/li>\n<\/ul>\n\n\n\n
        (2) state \uac12 \ubcc0\uacbd: setState()<\/p>\n\n\n\n
        setState() \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec state \uac12\uc744 \ubcc0\uacbd\ud558\uba74 \uc790\ub3d9\uc73c\ub85c render \ud568\uc218\ub97c \ud638\ucd9c<\/p>\n\n\n\n
        \ub2e4\uc74c\uacfc \uac19\uc740 \uc608\uc2dc\ub97c \ud1b5\ud574 useState\uc640 setState \uc0ac\uc6a9:<\/p>\n\n\n\n
          \n
        • App.js: Increase\ub97c \ud074\ub9ad\ud560\ub54c\ub9c8\ub2e4 1\uc529 \uc99d\uac00<\/li>\n<\/ul>\n\n\n\n
          import React, { useState } from 'react';\n\nconst App = () => {\n    const [num, setNumber] = useState(0);\/\/\ucd08\uae30\uac12 0const onIncrease = () => {\n        setNumber(num + 1);\n    }\n    return(\n        <div>\n            <h1>{num}<\/h1>\n            <button onClick={onIncrease}>Increase<\/button>\n        <\/div>\n    );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
          \ud83c\udf1fsetState() \ud568\uc218\ub294 \ube44\ub3d9\uae30 \ucc98\ub9ac<\/strong>, \uc989 \uc791\uc5c5 \uc21c\uc11c\ub300\ub85c\uac00 \uc544\ub2cc \uc774\ubca4\ud2b8\uc5d0 \ub530\ub77c \ucc98\ub9ac.<\/p>\n\n\n\n
          \uc5b4\ub5a4 \uc791\uc5c5\uc5d0\uc11c \uc2dc\uac04\uc774 \uc624\ub798 \uc18c\uc694\ub418\uba74 \ud574\ub2f9 \uc791\uc5c5\uc774 \uc644\ub8cc\ub420\ub54c\uae4c\uc9c0 \uae30\ub2e4\ub824\uc8fc\uc9c0 \uc54a\uace0 \ub2e4\uc74c \uc791\uc5c5\uc744 \uc2e4\ud589…<\/p>\n\n\n\n
          \uc989 \uc791\uc5c5\uc758 \uc2e4\ud589 \uc21c\uc11c\ub97c \ubcf4\uc7a5\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n
          \ud83c\udf1f setState() \ud568\uc218\uc758 \uc778\uc790\ub85c \ud568\uc218<\/strong>\ub97c \uc804\ub2ec\ud558\uba74 \uc774\uc804 state \uac12\uc744 \uc27d\uac8c \uac00\uc838\uc62c \uc218 \uc788\uc74c<\/p>\n\n\n\n
          state\ub97c \ubcc0\uacbd\ud55c \ud6c4 \ubcc0\uacbd\ub41c state\ub97c \uc0ac\uc6a9\ud574\uc57c \ud560 \uacbd\uc6b0(state\uc758 \uc5c5\ub370\uc774\ud2b8\uac00 \uc774\uc804\uc758 \uac12\uc5d0 \uc758\uc874):<\/p>\n\n\n\n
            \n
          • Counter.js: Increase, Decrease<\/li>\n<\/ul>\n\n\n\n
            import React, { useState } from 'react';\n\nfunction Counter() {\n    const [number, setNumber] = useState(0);\n\n    const onIncrease = () => {\n        setNumber(preNumber => preNumber + 1);\n    }\n\n    const onDecrease = () => {\n        setNumber(preNumber => preNumber - 1);\n    }\n\n    return(\n        <div>\n            <h2>{number}<\/h2>\n            <button onClick={onIncrease}>Increase<\/button>\n            <button onClick={onDecrease}>Decrease<\/button>\n        <\/div>\n    );\n}\n\nexport default Counter;<\/code><\/pre>\n\n\n\n
            (3) state \uac12 \ubcc0\uacbd: forceUpdate()<\/p>\n\n\n\n
            forceUpdate() \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uba74 \ud654\uba74\uc744 \uac15\uc81c\ub85c \uc0c8\ub85c \uace0\uce68\ud558\uc5ec render() \ud568\uc218 \ud638\ucd9c<\/p>\n\n\n\n
            \uc778\uc2a4\ud134\uc2a4 \ubcc0\uc218\uc640 \ud654\uba74\uc774 \ubcc0\uacbd\ub418\uc5b4 \ucd9c\ub825\ub428.<\/p>\n\n\n\n
              \n
            • ForceUpdate.js<\/li>\n<\/ul>\n\n\n\n
              import React, { Component } from 'react';\n\nclass ForceUpdate extends Components {\n    constructor(props) {\n        super(props);\n        this.state = {\n            stateString: 'react',\n        }\n    }\n    StateChange = () => {\n        this.state.stateString = 'React';\n        this.forceUpdate();\n    }\n\n    render() {\n        return(\n            <div>\n                <button onClick={this.stateChange}>forceUpdate<\/button>\n                {this.state.stateString}                \/\/ react\uc5d0\uc11c React\ub85c \ubcc0\uacbd\n            <\/div>\n        );\n    }\n}\n\nexport default ForceUpdate;<\/code><\/pre>\n\n\n\n
              \u203b forceUpdate()\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \ub9ac\uc561\ud2b8 \uc131\ub2a5\uc5d0 \uc81c\uc57d\uc774 \uc788\uc73c\ubbc0\ub85c<\/p>\n\n\n\n
              \ub9e4\ubc88 \ud654\uba74\uc744 \uc0c8\ub85c \ucd9c\ub825\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \uc544\ub2c8\uba74 \uac00\uae09\uc801 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub3c4\ub85d \ud568<\/p>\n","protected":false},"excerpt":{"rendered":"
              \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \uc774\ubca4\ud2b8\uc5d0 \uc758\ud574 \ubcc0\uacbd\uc774 \uc77c\uc5b4\ub098\ub294 \ub3d9\uc801\uc778 \uac12. \uac12\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc73c\uba70 \ubc18\ub4dc\uc2dc setState\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubcc0\uacbd\ud55c\ub2e4. \u203b state \uc0ac\uc6a9\ud560 \ub54c \uc8fc\uc758\uc0ac\ud56d \u2757state\uc5d0 \uc800\uc7a5\ub418\ub294 \uac1d\uccb4\ub294 \ubc18\ub4dc\uc2dc \ucd08\uae30\ud654(\uc0dd\uc131\uc790\uc5d0\uc11c \ucd08\uae30\ud654) \u2757state \uac12\uc744 \uc784\uc758\ub85c \uc9c1\uc811 \ubcc0\uacbd\ud558\uc9c0 \ub9d0 \uac83, \ubc18\ub4dc\uc2dc state \uac12 \ubcc0\uacbd\uc2dc setState() \uc0ac\uc6a9. \uc9c1\uc811 \ubcc0\uacbd\ud558\uba74 render \ud568\uc218\uac00 \ud638\ucd9c\ub418\uc9c0 \uc54a\uc544 \ub9ac\ub80c\ub354\ub9c1 \ubc1c\uc0dd X 1) \uc0ac\uc6a9\ubc95 (1) \uae30\ubcf8 \uc0ac\uc6a9: useState […]<\/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":[1],"tags":[100,102,101],"class_list":["post-93","post","type-post","status-publish","format-standard","hentry","category-react","tag-react","tag-react-js","tag-101"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/93","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=93"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/93\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/93\/revisions\/154"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}