From 76e8885e1b513d05e183746ab750e020e21b71b2 Mon Sep 17 00:00:00 2001 From: kim Date: Wed, 3 Feb 2021 21:05:04 +0900 Subject: [PATCH] react : props --- react-springboot/my-app/.eslintcache | 2 +- react-springboot/my-app/src/App.js | 3 +- .../my-app/src/components/Footer.js | 6 +-- .../my-app/src/components/Header.js | 6 +-- .../my-app/src/components/Login.js | 6 +-- .../my-app/src/components/home/Home.js | 25 +++++++++++++ react-springboot/my-app/src/pages/HomePage.js | 37 +++++++++++++++++++ 7 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 react-springboot/my-app/src/components/home/Home.js create mode 100644 react-springboot/my-app/src/pages/HomePage.js diff --git a/react-springboot/my-app/.eslintcache b/react-springboot/my-app/.eslintcache index 729d4ae8..f7f37bca 100644 --- a/react-springboot/my-app/.eslintcache +++ b/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",[]] \ No newline at end of file +[{"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"] \ No newline at end of file diff --git a/react-springboot/my-app/src/App.js b/react-springboot/my-app/src/App.js index c6892256..cefeb4e1 100644 --- a/react-springboot/my-app/src/App.js +++ b/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 ( <> - + ); } diff --git a/react-springboot/my-app/src/components/Footer.js b/react-springboot/my-app/src/components/Footer.js index a38ad75a..ff598681 100644 --- a/react-springboot/my-app/src/components/Footer.js +++ b/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 ( - +
  • 오시는길 : 서울
  • 전화번호 : 021321231
- + ); }; diff --git a/react-springboot/my-app/src/components/Header.js b/react-springboot/my-app/src/components/Header.js index a38eff6f..2833e835 100644 --- a/react-springboot/my-app/src/components/Header.js +++ b/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 ( - +
  • 메뉴 1
  • 메뉴 2
- + ); }; diff --git a/react-springboot/my-app/src/components/Login.js b/react-springboot/my-app/src/components/Login.js index 4f523e88..931cbad1 100644 --- a/react-springboot/my-app/src/components/Login.js +++ b/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 ( - +

로그인 페이지 입니다.

- + ); }; diff --git a/react-springboot/my-app/src/components/home/Home.js b/react-springboot/my-app/src/components/home/Home.js new file mode 100644 index 00000000..ab2f16f5 --- /dev/null +++ b/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 ( +
+

홈 : {number}

+ + + {board.map((p) => ( +

+ 제목: {p.title} 내용: {p.content} +

+ ))} +
+ ); +}; + +export default Home; +

홈페이지 입니다.

; diff --git a/react-springboot/my-app/src/pages/HomePage.js b/react-springboot/my-app/src/pages/HomePage.js new file mode 100644 index 00000000..90eb777a --- /dev/null +++ b/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 ( +
+
+ +
+ ); +}; + +export default HomePage;