change directory name

react+springboot/react-practice/src/App.css

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

react+springboot/react-practice/src/App.js

@@ -0,0 +1,15 @@
+import './App.css';
+import Top from './components/Top';
+import Bottom from './components/Bottom';
+
+function App() {
+  return (
+    <div className="container">
+      <h1>최상단 화면</h1>
+      <Top />
+      <Bottom />
+    </div>
+  );
+}
+
+export default App;

react+springboot/react-practice/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/react-practice/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/react-practice/src/index.js

@@ -0,0 +1,21 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom';
+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>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

react+springboot/react-practice/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;