change directory name

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

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

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

@@ -0,0 +1,19 @@
+import { Route } from 'react-router-dom';
+import './App.css';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
+
+function App() {
+  return (
+    <>
+      <Header />
+      <Route path="/" exact={true} component={HomePage} />
+      <Route path="/login/:id" exact={true} component={LoginPage} />
+      <Footer />
+    </>
+  );
+}
+
+export default App;

react+springboot/react-practice/practice/01/Style.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Title = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+export { Title };

react+springboot/react-practice/practice/01/Sub.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+let num = 10;
+
+const Sub = () => {
+  console.log('sub');
+  return (
+    <div>
+      <h1>Sub</h1>
+    </div>
+  );
+};
+
+export { num };
+export default Sub;

react+springboot/react-practice/practice/01/components/Footer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// 하나의 컴포넌트 생성 (재사용)
+// 하나의 컴포넌트에 js css를 파일 하나로 관리
+const StyledFooterDiv = styled.div`
+  border: 1px solid black;
+  height: 300px;
+`;
+
+const Footer = () => {
+  return (
+    <StyledFooterDiv>
+      <ul>
+        <li>오시는길 : 서울</li>
+        <li>전화번호 : 021321231</li>
+      </ul>
+    </StyledFooterDiv>
+  );
+};
+
+export default Footer;

react+springboot/react-practice/practice/01/components/Header.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Navbar, Nav, Form, FormControl, Button } from 'react-bootstrap';
+
+// 하나의 컴포넌트 생성 (재사용)
+// 하나의 컴포넌트에 js css를 파일 하나로 관리
+const StyledHeaderDiv = styled.div`
+  border: 1px solid black;
+  height: 300px;
+  background-color: ${(props) => props.backgroundColor};
+`;
+
+const StyledHeaderLink = styled(Link)`
+  color: red;
+`;
+
+const Header = () => {
+  return (
+    <>
+      <StyledHeaderDiv backgroundColor="blue">
+        <ul>
+          <li>
+            <StyledHeaderLink to="/">홈</StyledHeaderLink>
+          </li>
+          <li>
+            <StyledHeaderLink to="/login/10">로그인</StyledHeaderLink>
+          </li>
+        </ul>
+      </StyledHeaderDiv>
+      <>
+        <Navbar bg="dark" variant="dark">
+          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
+          <Nav className="mr-auto">
+            <Link to="/" className="nav-link">
+              Home
+            </Link>
+            <Link to="/login" className="nav-link">
+              Login
+            </Link>
+          </Nav>
+          <Form inline>
+            <FormControl type="text" placeholder="Search" className="mr-sm-2" />
+            <Button variant="outline-info">Search</Button>
+          </Form>
+        </Navbar>
+      </>
+    </>
+  );
+};
+
+export default Header;

react+springboot/react-practice/practice/01/components/home/Home.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import styled from 'styled-components';
+
+const StyledDeleteButton = styled.button`
+  color: ${(props) => (props.user.username === 'kim' ? 'blue' : 'red')};
+`;
+
+const StyleAddButton = styled(StyledDeleteButton)`
+  background-color: green;
+`;
+
+const Home = (props) => {
+  // 구조분할 할당
+  const { board, setBoard, user } = props;
+
+  return (
+    <>
+      <h1>홈</h1>
+      <Button variant="primary">Primary</Button>{' '}
+      <StyleAddButton user={user}>더하기</StyleAddButton>
+      <StyledDeleteButton user={user} onClick={() => setBoard([])}>
+        전체삭제
+      </StyledDeleteButton>
+      {board.map((p) => (
+        <h3 key={board.id}>
+          제목: {p.title} 내용: {p.content}
+        </h3>
+      ))}
+    </>
+  );
+};
+
+export default Home;
+
+// props
+// const Home = (props) => {
+//   // const board = props.board;
+//   // const id = props.id;
+
+//   // 구조분할 할당
+//   const { board, setBoard, number, setNumber } = props;
+
+//   return (
+//     <div>
+//       <h1>홈 : {number} </h1>
+//       <button onClick={() => setNumber(number + 1)}>번호증가</button>
+//       <button onClick={() => setBoard([])}>전체삭제</button>
+//       {board.map((p) => (
+//         <h3>
+//           제목: {p.title} 내용: {p.content}
+//         </h3>
+//       ))}
+//     </div>
+//   );
+// };
+
+// export default Home;

react+springboot/react-practice/practice/01/components/login/Login.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledLoginDiv = styled.div`
+  padding: 30px;
+`;
+
+const Login = () => {
+  return (
+    <StyledLoginDiv>
+      <h1>로그인 페이지 입니다.</h1>
+    </StyledLoginDiv>
+  );
+};
+
+export default Login;

react+springboot/react-practice/practice/01/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/01/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/01/pages/HomePage.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import Home from '../components/home/Home';
+
+const HomePage = () => {
+  // Http 요청 (fetch, axios)
+  const [board, setBoard] = useState([]);
+  const [user, setUser] = useState({});
+
+  useEffect(() => {
+    // 데이터를 받았다고 가정
+    // fetch(), axios()
+    let data = [
+      { id: 1, title: '제목1', content: '내용1' },
+      { id: 2, title: '제목2', content: '내용2' },
+      { id: 3, title: '제목3', content: '내용3' },
+    ];
+
+    setBoard([...data]);
+    setUser({ id: 1, username: 'lee' });
+  }, []);
+
+  return (
+    <div>
+      <Home board={board} setBoard={setBoard} user={user} />
+    </div>
+  );
+};
+
+export default HomePage;
+
+// props
+// const HomePage = () => {
+//   // Http 요청 (fetch, axios)
+//   const [board, setBoard] = useState([]);
+//   const [number, setNumber] = useState(0);
+
+//   useEffect(() => {
+//     // 데이터를 받았다고 가정
+//     // fetch(), axios()
+//     let data = [
+//       { id: 1, title: '제목1', content: '내용1' },
+//       { id: 2, title: '제목2', content: '내용2' },
+//       { id: 3, title: '제목3', content: '내용3' },
+//     ];
+
+//     setBoard([...data]);
+//   }, []);
+
+//   return (
+//     <div>
+//       <Header />
+//       <Home
+//         number={number}
+//         board={board}
+//         setBoard={setBoard}
+//         setNumber={setNumber}
+//       />
+//       <Footer />
+//     </div>
+//   );
+// };
+
+// export default HomePage;

react+springboot/react-practice/practice/01/pages/LoginPage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Login from '../components/Login';
+
+const LoginPage = (props) => {
+  console.log(props);
+  console.log(props.match.params.id);
+  return (
+    <div>
+      <button onClick={() => props.history.goBack()}>뒤로가기</button>
+      <Login />
+    </div>
+  );
+};
+
+export default LoginPage;

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;