{"id":13582,"date":"2023-05-20T19:28:05","date_gmt":"2023-05-20T10:28:05","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=13582"},"modified":"2023-05-20T20:40:55","modified_gmt":"2023-05-20T11:40:55","slug":"react-%ed%95%a8%ec%88%98%ed%98%95-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8%ec%97%90-%eb%a7%a4%ec%84%9c%eb%93%9c-%ec%b6%94%ea%b0%80%ed%95%b4%ec%84%9c-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=13582","title":{"rendered":"[React] \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub9e4\uc11c\ub4dc \ucd94\uac00\ud574\uc11c \uc0ac\uc6a9\ud558\uae30"},"content":{"rendered":"

\uba3c\uc800 App.jsx \ud30c\uc77c\uc5d0 \ucf54\ub4dc\uac00 \uc791\uc131\ub41c App \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\nimport { useRef } from 'react'\r\nimport '.\/App.css'\r\nimport MyComponent from '.\/MyComponent'\r\n\r\nfunction App() {\r\n  const refComponent = useRef()\r\n  \r\n  return (\r\n    <>\r\n      <MyComponent ref={refComponent} \/>\r\n      <button onClick={ () => { refComponent.current.setName(\"Dip2K\") } }>set Name<\/button>\r\n      <button onClick={ () => { refComponent.current.setAge(100) } }>set Age<\/button>\r\n      <button onClick={ () => { \r\n        alert(`Name: ${refComponent.current.getName()}, Age: ${refComponent.current.getAge()}`) \r\n      } }>get Info<\/button>\r\n    <\/>\r\n  )\r\n}\r\n\r\nexport default App\r\n<\/pre>\n
\uc2e4\ud589 \uacb0\uacfc\uc5d0 \ub300\ud55c \ud654\uba74\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n
\"\"<\/p>\n
\ud654\uba74\uc5d0\uc11c App \ucef4\ud3ec\ub10c\ud2b8\uc758 \ucf54\ub4dc\uc5d0\uc11c \ubcf4\uc774\ub294 MyComponent\u001d\ub294 Name\uacfc Age\ub97c \uc785\ub825\ubc1b\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4. \uadf8 \uc678 3\uac1c\uc758 \ubc84\ud2bc\uc744 \ubcf4\uba74 MyComponent\uc758 \ub9e4\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub9ac\uc5d1\ud2b8\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub9e4\uc11c\ub4dc\ub97c \ud638\ucd9c\ud55c\ub2e4\ub77c\ub294 \uac83\uc740 \ub9ac\uc5d1\ud2b8 \uacc4\uc5d0\uc11c\ub294 \ub9e4\uc6b0 \uc5b4\uc0c9\ud55c \uacbd\uc6b0\uc774\uba70 \ud53c\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\ub77c\uace0 \ud569\ub2c8\ub2e4.<\/p>\n
MyComponent\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nimport { forwardRef, useImperativeHandle, useRef } from \"react\";\r\n\r\nfunction MyComponent(props, ref) {\r\n  const refNameInput = useRef()\r\n  const refAgeInput = useRef()\r\n\r\n  useImperativeHandle(ref, () => ({\r\n    getName: () => { return refNameInput.current.value },\r\n    setName: (v) => { refNameInput.current.value = v },\r\n    getAge: () => { return refAgeInput.current.value },\r\n    setAge: (v) => { refAgeInput.current.value = v },\r\n  }))\r\n\r\n  return (\r\n    <div>\r\n      <p><span>Name <\/span><input ref={refNameInput} \/><\/p>\r\n      <p><span>Age <\/span><input ref={refAgeInput} \/><\/p>\r\n    <\/div>\r\n  )\r\n}\r\n\r\nexport default forwardRef(MyComponent)\r\n<\/pre>\n
\ub9ac\uc5d1\ud2b8\uc5d0\uc11c \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub9e4\uc11c\ub4dc\ub97c \ucd94\uac00\ud558\uae30 \uc704\ud574\uc11c\ub294 forwardRef\ub77c\ub294 \uace0\ucc28\ud568\uc218\uc640 useImperativeHandle\ub77c\ub294 \ud6c5\uc744 \ub3d9\uc2dc\uc5d0 \uc0ac\uc6a9\ud574\uc57c \ud558\uba70 useImperativeHandle\uc744 \ud1b5\ud574 \ub9e4\uc11c\ub4dc\ub97c \uc815\uc758\ud574\uc90d\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
\uba3c\uc800 App.jsx \ud30c\uc77c\uc5d0 \ucf54\ub4dc\uac00 \uc791\uc131\ub41c App \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc788\uc2b5\ub2c8\ub2e4. import { useRef } from ‘react’ import ‘.\/App.css’ import MyComponent from ‘.\/MyComponent’ function App() { const refComponent = useRef() return ( <> <MyComponent ref={refComponent} \/> <button onClick={ () => { refComponent.current.setName(“Dip2K”) } }>set Name<\/button> <button onClick={ () => { refComponent.current.setAge(100) } }>set Age<\/button> <button onClick={ () => … <\/p>\n
\ub354 \ubcf4\uae30 “[React] \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub9e4\uc11c\ub4dc \ucd94\uac00\ud574\uc11c \uc0ac\uc6a9\ud558\uae30”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-13582","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13582"}],"version-history":[{"count":12,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13582\/revisions"}],"predecessor-version":[{"id":13597,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13582\/revisions\/13597"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13582"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}