{"id":637,"date":"2019-04-11T21:41:14","date_gmt":"2019-04-11T12:41:14","guid":{"rendered":"https:\/\/amati.io\/?p=637"},"modified":"2019-04-11T21:41:14","modified_gmt":"2019-04-11T12:41:14","slug":"react-component-update-on-2019-04","status":"publish","type":"post","link":"https:\/\/blog.neue.nz\/?p=637","title":{"rendered":"React component updates in 2019.04"},"content":{"rendered":"\n

React\uc640 \ud568\uaed8 \uc8fc\ub85c \uc0ac\uc6a9\ub418\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uba54\uc774\uc800 \ubc84\uc804\uc5c5\uc774 2\uac74 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc0c1\ud0dc\uad00\ub9ac\ub97c \uc704\ud55c Redux\ub97c React\uc640 \uc5f0\uacb0\ud574\uc8fc\ub294 react-redux<\/a>, \uadf8\ub9ac\uace0 \uc5ec\ub7ec \ud654\uba74\uc73c\ub85c \uad6c\uc131\ub418\uc5b4\uc788\ub294 single-page application \uc744 \ub9cc\ub4e4 \uacbd\uc6b0 \ud544\uc218\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\uac8c \ub418\ub294 react-router<\/a> \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

\ub450 \ucef4\ud3ec\ub10c\ud2b8 \ubaa8\ub450 react \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0 \uc788\uc5b4 \ud544\uc218\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294\ub370, \ub2e4\ud589\ud788\ub3c4 \ub458 \ub2e4 \uc774\uc804\uc758 \uba54\uc774\uc800 \ubc84\uc804\uacfc \ud638\ud658\ub429\ub2c8\ub2e4. \uc8fc\ub85c \ud37c\ud3ec\uba3c\uc2a4 \uac1c\uc120\uacfc \uc77c\ubd80 \ud3b8\uc758\uc131\uc774 \uac1c\uc120\ub418\uc5c8\uae30 \ub54c\ubb38\uc5d0, \uc8fc\uc758\uc0ac\ud56d\ub9cc \ucc38\uace0\ud55c\ub2e4\uba74 \ubcc4\ub2e4\ub978 migration \uc5c6\uc774 package.json \uc5d0\uc11c version-up \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

\n\n\n\n

react-redux v7.0.1<\/h3>\n\n\n\n

\ubc84\uc804 6\uc5d0\uc11c \ub9ac\ud3ec\ud2b8\ub418\uc5c8\ub358 \uc18d\ub3c4 \uc774\uc288\ub97c \uac1c\uc120\ud558\uc600\uc2b5\ub2c8\ub2e4. \ub0b4\ubd80\uc801\uc73c\ub85c\ub294 connect() \ud568\uc218\uc5d0\uc11c react 16.8\uc5d0 \ucd94\uac00\ub418\uc5c8\ub358 Hooks\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\ub300\ubd80\ubd84 \ub0b4\ubd80\uc801 \uac1c\uc120\uc774 \uc774\ub8e8\uc5b4\uc84c\uace0 \uae30\uc874 version 6\uc758 public API\uc640 \ud638\ud658\ub418\uae30 \ub54c\ubb38\uc5d0 \ucf54\ub4dc\uc758 \ubcc0\uacbd\uc740 \uc5c6\uc2b5\ub2c8\ub2e4. \ub2e4\ub9cc \ub2e4\uc74c\uacfc \uac19\uc740 \ub0b4\uc6a9\uc740 \uc720\uc758\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

1. React \ucd5c\uc18c \ubc84\uc804\uc758 \ubcc0\uacbd<\/strong><\/p>\n\n\n\n

\ub0b4\ubd80\uc801\uc73c\ub85c React Hooks\ub97c \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 react\uc758 \ucd5c\uc18c \ubc84\uc804\uc740 16.4\uc5d0\uc11c 16.8.4<\/code> \ub85c \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4. react-redux 7\uc744 \uc0ac\uc6a9\ud558\ub824\uba74 react v16.8.4\ub97c \uc0ac\uc6a9\ud558\uac70\ub098 16.8.4\ub85c \uc5c5\uadf8\ub808\uc774\ub4dc \ud574\uc57c\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\"dependencies\": {\n    \"react\": \"^16.8.4\",\n    \"react-dom\": \"^16.8.4\",\n    \"react-redux\": \"^7.0.1\",\n}<\/pre>\n\n\n\n
2. connect()\uac00 \ubc18\ud658\ud558\ub294 type\uc774 \ubcc0\uacbd\ub428<\/strong><\/p>\n\n\n\n
connect()\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c React.memo()<\/code> \ub97c \ud65c\uc6a9\ud558\uc5ec function \ub300\uc2e0 \ud2b9\ubcc4\ud55c object\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c PropTypes\ub85c \uc720\ud6a8\uc131\uc744 \uccb4\ud06c\ud558\uace0 \uc788\uc5c8\ub2e4\uba74 PropTypes.func\uc5d0\uc11c PropType.elementType\uc73c\ub85c \ubcc0\uacbd\ud574\uc57c \ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc PropTypes.func\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uace0 \ud574\uc11c warning\uc774 \ubc1c\uc0dd\ud558\uc9c0\ub294 \uc54a\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
class App extends React.Component {\n  static propTypes = {\n    someStore: PropTypes.elementType.isRequired,\n  };\n}<\/pre>\n\n\n\n
3. Batch API \ucd94\uac00<\/strong><\/p>\n\n\n\n
React\uc5d0\ub294 \ub3d9\uc77c\ud55c event loop tick\uc5d0\uc11c \uc5ec\ub7ec \uc5c5\ub370\uc774\ud2b8\ub97c \ubb36\uc744 \uc218 \uc788\ub294 unstable_batchedUpdates API<\/code> \uac00 \uc788\uc2b5\ub2c8\ub2e4. react-redux\ub294 \uc774 API\ub97c \ub0b4\ubd80\uc801\uc778 redux \uad6c\ub3c5 \ucc98\ub9ac \uae30\ub2a5\uc5d0 \uc0ac\uc6a9\ud588\ub294\ub370, redux store update\ub85c \uc778\ud55c \ub80c\ub354\ub9c1 \uc218\ub97c \uc904\uc5ec\uc11c \ud37c\ud3ec\uba3c\uc2a4 \uac1c\uc120 \ud6a8\uacfc\uac00 \uc788\uc5c8\ub2e4\uace0 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc774 API\ub294 react-core\uac00 \uc544\ub2cc react-dom \ub610\ub294 react-native \ub4f1\uc758 \ub80c\ub354\ub7ec \ud328\ud0a4\uc9c0\uc5d0 \uc788\ub294\ub370, react-redux\uc5d0\uc11c\ub294 \uc774 \ud568\uc218\ub97c \uacf5\uac1c\uc801\uc73c\ub85c batch()<\/code>\ub77c\ub294 \uc774\ub984\uc73c\ub85c \ub0b4\ubcf4\ub0c8\uc2b5\ub2c8\ub2e4. \uadf8\ub798\uc11c, \uc774 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc5ec\ub7ec action\uc744 \ub2e8\uc77c \ub80c\ub354\ub9c1\uc774 \uc77c\uc5b4\ub0a0 \uc218 \uc788\ub3c4\ub85d \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
import { batch } from \"react-redux\";\n\nfunction myThunk() {\n    return (dispatch, getState) => {\n        \/\/ \ud55c\ubc88\uc5d0 \ud558\ub098\uc758 \uacb0\ud569\ub41c re-render\uac00 \ubc1c\uc0dd\ud55c\ub2e4.\n        batch(() => {\n            dispatch(increment());\n            dispatch(increment());\n        })\n    }\n}<\/pre>\n\n\n\n
Release Notes : https:\/\/github.com\/reduxjs\/react-redux\/releases\/tag\/v7.0.1<\/a><\/p>\n\n\n\n
\n\n\n\n
react-router v5.0<\/h4>\n\n\n\n
\uc774\ubbf8 version 4\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4\uba74 \ucf54\ub4dc\uc758 \ubcc0\uacbd \uc5c6\uc774 \ubc14\ub85c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6d0\ub798 4.4\ub85c \ubc1c\ud45c\ub420 \uc608\uc815\uc774\uc5c8\uc73c\ub098 beta test \uc911 \uc608\uae30\uce58 \uc54a\uc740 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uc5ec \uc0c8\ub86d\uac8c 5.0\uc73c\ub85c \ub9b4\ub9ac\uc988\ub418\uc5c8\uc2b5\ub2c8\ub2e4. react-router 5.0\uc5d0\uc11c\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c React 16\uc5d0 \ub300\ud55c \uc9c0\uc6d0\uc774 \uac15\ud654\ub418\uace0 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc774 \uba87\uac00\uc9c0 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
1. main bundle\uc5d0\uc11c \ud544\uc694\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub9cc \ub85c\ub529<\/strong><\/p>\n\n\n\n
\uac1c\ubcc4 \ud30c\uc77c\uc744 import \ud558\ub294 \ub300\uc2e0\uc5d0 main bundle\uc5d0\uc11c \ud544\uc694\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub85c\ub529\ud560 \uc218 \uc788\ub3c4\ub85d \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\/\/ Instead of:\nimport Router from 'react-router\/Router';\nimport Switch from 'react-router\/Switch';\n\n\/\/ do:\nimport { Router, Switch } from 'react-router';<\/pre>\n\n\n\n
2. <Route path>\uc5d0 \ubc30\uc5f4\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc74c<\/strong><\/p>\n\n\n\n
\ud558\ub098\uc758 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 2\uac1c\uc758 \ub2e4\ub978 route\ub97c \uc9c0\uc815\ud558\uace0\uc790 \ud560 \ub54c \ubc30\uc5f4\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\/\/ Instead of this:\n<Switch>\n  <Route path=\"\/users\/:id\" component={User} \/>\n  <Route path=\"\/profile\/:id\" component={User} \/>\n<\/Switch>\n\n\/\/ you can now do this:\n<Route path={[\"\/users\/:id\", \"\/profile\/:id\"]} component={User} \/><\/pre>\n\n\n\n
Reference : https:\/\/reacttraining.com\/blog\/react-router-v5\/<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
React\uc640 \ud568\uaed8 \uc8fc\ub85c \uc0ac\uc6a9\ub418\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uba54\uc774\uc800 \ubc84\uc804\uc5c5\uc774 2\uac74 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \uc0c1\ud0dc\uad00\ub9ac\ub97c \uc704\ud55c Redux\ub97c React\uc640 \uc5f0\uacb0\ud574\uc8fc\ub294 react-redux, \uadf8\ub9ac\uace0 \uc5ec\ub7ec \ud654\uba74\uc73c\ub85c \uad6c\uc131\ub418\uc5b4\uc788\ub294 single-page application \uc744 \ub9cc\ub4e4 \uacbd\uc6b0 \ud544\uc218\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\uac8c \ub418\ub294 react-router \uc785\ub2c8\ub2e4. \ub450 \ucef4\ud3ec\ub10c\ud2b8 \ubaa8\ub450 react \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0 \uc788\uc5b4 \ud544\uc218\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294\ub370, \ub2e4\ud589\ud788\ub3c4 \ub458 \ub2e4 \uc774\uc804\uc758 \uba54\uc774\uc800 \ubc84\uc804\uacfc \ud638\ud658\ub429\ub2c8\ub2e4. \uc8fc\ub85c \ud37c\ud3ec\uba3c\uc2a4 \uac1c\uc120\uacfc \uc77c\ubd80 \ud3b8\uc758\uc131\uc774 \uac1c\uc120\ub418\uc5c8\uae30 \ub54c\ubb38\uc5d0, \uc8fc\uc758\uc0ac\ud56d\ub9cc \ucc38\uace0\ud55c\ub2e4\uba74 \ubcc4\ub2e4\ub978 migration […]<\/p>\n","protected":false},"author":2,"featured_media":647,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[110,111,112],"class_list":["post-637","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-react","tag-react-redux","tag-react-router"],"_links":{"self":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=637"}],"version-history":[{"count":0,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/637\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}