react : props

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\\Sub.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js":"5","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js":"6","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js":"7","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js":"8"},{"size":220,"mtime":1612343693643,"results":"9","hashOfConfig":"10"},{"size":155,"mtime":1612346263209,"results":"11","hashOfConfig":"10"},{"size":196,"mtime":1612336218178,"results":"12","hashOfConfig":"10"},{"size":163,"mtime":1612343575699,"results":"13","hashOfConfig":"10"},{"size":453,"mtime":1612345848926,"results":"14","hashOfConfig":"10"},{"size":482,"mtime":1612345822061,"results":"15","hashOfConfig":"10"},{"size":275,"mtime":1612346215173,"results":"16","hashOfConfig":"10"},{"size":377,"mtime":1612346120758,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"11g3wnd",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","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\\Sub.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js",[]]
+[{"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\\Sub.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js":"5","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js":"6","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js":"7","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js":"8","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\HomePage.js":"9","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\home\\Home.js":"10"},{"size":220,"mtime":1612343693643,"results":"11","hashOfConfig":"12"},{"size":195,"mtime":1612350514674,"results":"13","hashOfConfig":"12"},{"size":196,"mtime":1612336218178,"results":"14","hashOfConfig":"12"},{"size":163,"mtime":1612343575699,"results":"15","hashOfConfig":"12"},{"size":468,"mtime":1612348378545,"results":"16","hashOfConfig":"12"},{"size":497,"mtime":1612348360786,"results":"17","hashOfConfig":"12"},{"size":293,"mtime":1612348402121,"results":"18","hashOfConfig":"12"},{"size":377,"mtime":1612346120758,"results":"19","hashOfConfig":"12"},{"size":898,"mtime":1612353626775,"results":"20","hashOfConfig":"12"},{"size":597,"mtime":1612353665367,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"11g3wnd",{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","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",["42"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\HomePage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\home\\Home.js",[],{"ruleId":"43","severity":1,"message":"44","line":3,"column":8,"nodeType":"45","messageId":"46","endLine":3,"endColumn":17},"no-unused-vars","'LoginPage' is defined but never used.","Identifier","unusedVar"]

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

@@ -1,10 +1,11 @@
 import './App.css';
+import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
 
 function App() {
   return (
     <>
-      <LoginPage />
+      <HomePage />
     </>
   );
 }

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

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

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

@@ -3,19 +3,19 @@ import styled from 'styled-components';
 
 // 하나의 컴포넌트 생성 (재사용)
 // 하나의 컴포넌트에 js css를 파일 하나로 관리
-const HeaderList = styled.div`
+const StyledHeaderDiv = styled.div`
   border: 1px solid black;
   height: 300px;
 `;
 
 const Header = () => {
   return (
-    <HeaderList>
+    <StyledHeaderDiv>
       <ul>
         <li>메뉴 1</li>
         <li>메뉴 2</li>
       </ul>
-    </HeaderList>
+    </StyledHeaderDiv>
   );
 };
 

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

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

react-springboot/my-app/src/components/home/Home.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+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;
+<h1>홈페이지 입니다.</h1>;

react-springboot/my-app/src/pages/HomePage.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import Home from '../components/home/Home';
+
+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;