react : redux

react-springboot/my-app/.eslintcache

@@ -1 +1 @@
-[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\ListPage.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\WritePage.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Navigation.js":"5"},{"size":360,"mtime":1612361035951,"results":"6","hashOfConfig":"7"},{"size":439,"mtime":1612369197962,"results":"8","hashOfConfig":"7"},{"size":1998,"mtime":1612373599309,"results":"9","hashOfConfig":"7"},{"size":492,"mtime":1612368959285,"results":"10","hashOfConfig":"7"},{"size":306,"mtime":1612368239201,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"11g3wnd",{"filePath":"15","messages":"16","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["23","24"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",["25","26"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\ListPage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\WritePage.js",["27"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Navigation.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"32","severity":1,"message":"33","line":1,"column":10,"nodeType":"34","messageId":"35","endLine":1,"endColumn":15},{"ruleId":"32","severity":1,"message":"36","line":4,"column":8,"nodeType":"34","messageId":"35","endLine":4,"endColumn":17},{"ruleId":"32","severity":1,"message":"37","line":6,"column":9,"nodeType":"34","messageId":"35","endLine":6,"endColumn":13},"no-native-reassign",["38"],"no-negated-in-lhs",["39"],"no-unused-vars","'Route' is defined but never used.","Identifier","unusedVar","'WritePage' is defined but never used.","'post' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
+[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Top.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Bottom.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\store.js":"5"},{"size":534,"mtime":1612422022110,"results":"6","hashOfConfig":"7"},{"size":261,"mtime":1612422137381,"results":"8","hashOfConfig":"7"},{"size":346,"mtime":1612423047106,"results":"9","hashOfConfig":"7"},{"size":464,"mtime":1612422810996,"results":"10","hashOfConfig":"7"},{"size":637,"mtime":1612422959111,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"11g3wnd",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Top.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Bottom.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\store.js",[]]

react-springboot/my-app/package-lock.json

@@ -12451,6 +12451,18 @@
         "warning": "^4.0.3"
       }
     },
+    "react-redux": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
+      "integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

react-springboot/my-app/package.json

@@ -12,8 +12,10 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "redux": "^4.0.5",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },

react-springboot/my-app/practice/02 Route, Link/App.css

@@ -0,0 +1,3 @@
+.box-style {
+  color: blue;
+}

react-springboot/my-app/practice/02 Route, Link/App.js

@@ -0,0 +1,18 @@
+import { Route } from 'react-router-dom';
+import Navigation from './components/Navigation';
+import ListPage from './pages/ListPage';
+import WritePage from './pages/WritePage';
+
+function App() {
+  return (
+    <div>
+      <Navigation />
+      <ListPage />
+
+      {/* <Route path="/" exact={true} component={ListPage}></Route>
+      <Route path="/write" exact={true} component={WritePage}></Route> */}
+    </div>
+  );
+}
+
+export default App;

react-springboot/my-app/practice/02 Route, Link/index.js

@@ -0,0 +1,15 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

react-springboot/my-app/src/App.css

@@ -1,3 +1,13 @@
-.box-style {
-  color: blue;
+.container {
+  height: 700px;
+  border: 2px solid black;
+}
+
+.sub_container {
+  height: 250px;
+  border: 2px solid black;
+}
+
+div {
+  padding: 10px;
 }

react-springboot/my-app/src/App.js

@@ -1,16 +1,13 @@
-import { Route } from 'react-router-dom';
-import Navigation from './components/Navigation';
-import ListPage from './pages/ListPage';
-import WritePage from './pages/WritePage';
+import './App.css';
+import Top from './components/Top';
+import Bottom from './components/Bottom';
 
 function App() {
   return (
-    <div>
-      <Navigation />
-      <ListPage />
-
-      {/* <Route path="/" exact={true} component={ListPage}></Route>
-      <Route path="/write" exact={true} component={WritePage}></Route> */}
+    <div className="container">
+      <h1>최상단 화면</h1>
+      <Top />
+      <Bottom />
     </div>
   );
 }

react-springboot/my-app/src/components/Bottom.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import '../App.css';
+import { decrease, increase } from '../store';
+
+const Bottom = () => {
+  const dispatch = useDispatch();
+  return (
+    <div className="sub_container">
+      <h1>Bottom</h1>
+      <button onClick={() => dispatch(increase('kim'))}>증가</button>
+      <button onClick={() => dispatch(decrease())}>감소</button>
+    </div>
+  );
+};
+
+export default Bottom;

react-springboot/my-app/src/components/Top.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import '../App.css';
+
+const Top = () => {
+  const { number, username } = useSelector((store) => store);
+  return (
+    <div className="sub_container">
+      <h1>Top</h1>
+      번호 : {number}
+      이름 : {username}
+    </div>
+  );
+};
+
+export default Top;

react-springboot/my-app/src/index.js

@@ -1,14 +1,20 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
+import { Provider } from 'react-redux';
+import reducer from './store';
+import { createStore } from 'redux';
 import { BrowserRouter } from 'react-router-dom';
 
+const store = createStore(reducer);
+
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <Provider store={store}>
+        <App />
+      </Provider>
     </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root'),

react-springboot/my-app/src/store.js

@@ -0,0 +1,26 @@
+// 액션
+export const increase = (username) => ({
+  type: 'INCREMENT',
+  payload: username,
+});
+export const decrease = () => ({ type: 'DECREMENT' });
+
+// 상태
+const initstate = {
+  username: '?',
+  number: 1,
+};
+
+// 액션의 결과를 걸러냄
+const reducer = (state = initstate, action) => {
+  switch (action.type) {
+    case 'INCREMENT':
+      return { number: state.number + 1, username: action.payload }; // return 되는 순간 state가 변경이 되므로 ui 변경됨
+    case 'DECREMENT':
+      return { number: state.number - 1 };
+    default:
+      return state;
+  }
+};
+
+export default reducer;

react-springboot/my-app/yarn.lock

@@ -5542,7 +5542,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -9164,7 +9164,7 @@ react-error-overlay@^6.0.8:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
 
-react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9193,6 +9193,17 @@ react-overlays@^4.1.0:
     uncontrollable "^7.0.0"
     warning "^4.0.3"
 
+react-redux@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
+  integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -9400,6 +9411,14 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -10581,6 +10600,11 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"