change directory name

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

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

react+springboot/react-practice/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/react-practice/practice/02 Route, Link/components/Navigation.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navigation = () => {
+  return (
+    <ul>
+      <li>
+        <Link to="/">리스트</Link>
+      </li>
+      <li>
+        <Link to="/write">글쓰기</Link>
+      </li>
+    </ul>
+  );
+};
+
+export default Navigation;

react+springboot/react-practice/practice/02 Route, Link/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

react+springboot/react-practice/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/react-practice/practice/02 Route, Link/pages/ListPage.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useState } from 'react';
+import styled from 'styled-components';
+
+const StyledItemBoxDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid black;
+  padding: 10px;
+  height: 100px;
+  margin: 20px;
+  align-items: center;
+`;
+
+const ListPage = () => {
+  const [post, setPost] = useState({
+    id: 0,
+    title: '',
+    content: '',
+  });
+
+  const [posts, setPosts] = useState([
+    { id: 1, title: '제목1', content: '내용1' },
+    { id: 2, title: '제목2', content: '내용2' },
+    { id: 3, title: '제목3', content: '내용3' },
+    { id: 4, title: '제목4', content: '내용4' },
+    { id: 5, title: '제목5', content: '내용5' },
+  ]);
+
+  const handleWrite = (e) => {
+    // ListPage의 setPosts
+    e.preventDefault();
+    setPosts([...posts, post]);
+  };
+
+  const handleForm = (e) => {
+    // computed property names 문법 (키값 동적 할당)
+    setPost({ ...post, [e.target.name]: e.target.value });
+  };
+
+  const handleDelete = (props) => {
+    setPosts(posts.filter((v) => v.id !== props));
+  };
+
+  return (
+    <div>
+      <h1>글목록 페이지</h1>
+      <form onSubmit={handleWrite}>
+        <input
+          type="text"
+          placeholder="제목을 입력하세요"
+          value={post.title}
+          onChange={handleForm}
+          name="title"
+        />
+        <input
+          type="text"
+          placeholder="내용을 입력하세요"
+          value={post.content}
+          onChange={handleForm}
+          name="content"
+        />
+        <button>글쓰기</button>
+      </form>
+      {posts.map((post) => (
+        <StyledItemBoxDiv>
+          <div>
+            번호 : {post.id} / 제목 : {post.title} / 내용 : {post.content}
+          </div>
+          <button onClick={() => handleDelete(post.id)}>삭제</button>
+        </StyledItemBoxDiv>
+      ))}
+    </div>
+  );
+};
+
+export default ListPage;

react+springboot/react-practice/practice/02 Route, Link/pages/WritePage.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const WritePage = () => {
+  const handleWrite = () => {
+    // ListPage의 setPosts
+    let post = { id: 6, title: 'input value' };
+  };
+
+  return (
+    <div>
+      <h1>글쓰기 페이지</h1>
+      <hr />
+      <form>
+        <input type="text" placeholder="제목을 입력하세요" />
+        <button type="button" onClick={handleWrite}>
+          글쓰기
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default WritePage;