react : styled component 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","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"]
+[{"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":549,"mtime":1612354669010,"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":1674,"mtime":1612354755132,"results":"20","hashOfConfig":"12"},{"size":1222,"mtime":1612354711881,"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/components/Header.js

@@ -6,11 +6,12 @@ import styled from 'styled-components';
 const StyledHeaderDiv = styled.div`
   border: 1px solid black;
   height: 300px;
+  background-color: ${(props) => props.backgroundColor};
 `;
 
 const Header = () => {
   return (
-    <StyledHeaderDiv>
+    <StyledHeaderDiv backgroundColor="blue">
       <ul>
         <li>메뉴 1</li>
         <li>메뉴 2</li>

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

@@ -1,17 +1,20 @@
 import React from 'react';
+import styled from 'styled-components';
+
+const StyledDeleteButton = styled.button`
+  color: ${(props) => (props.user.username === 'kim' ? 'blue' : 'red')};
+`;
 
 const Home = (props) => {
-  // const board = props.board;
-  // const id = props.id;
-
   // 구조분할 할당
-  const { board, setBoard, number, setNumber } = props;
+  const { board, setBoard, user } = props;
 
   return (
     <div>
-      <h1>홈 : {number} </h1>
-      <button onClick={() => setNumber(number + 1)}>번호증가</button>
-      <button onClick={() => setBoard([])}>전체삭제</button>
+      <h1>홈 : </h1>
+      <StyledDeleteButton user={user} onClick={() => setBoard([])}>
+        전체삭제
+      </StyledDeleteButton>
       {board.map((p) => (
         <h3>
           제목: {p.title} 내용: {p.content}
@@ -22,4 +25,27 @@ const Home = (props) => {
 };
 
 export default Home;
-<h1>홈페이지 입니다.</h1>;
+
+// 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/my-app/src/pages/HomePage.js

@@ -6,7 +6,7 @@ import Home from '../components/home/Home';
 const HomePage = () => {
   // Http 요청 (fetch, axios)
   const [board, setBoard] = useState([]);
-  const [number, setNumber] = useState(0);
+  const [user, setUser] = useState({});
 
   useEffect(() => {
     // 데이터를 받았다고 가정
@@ -18,20 +18,50 @@ const HomePage = () => {
     ];
 
     setBoard([...data]);
+    setUser({ id: 1, username: 'lee' });
   }, []);
 
   return (
     <div>
       <Header />
-      <Home
-        number={number}
-        board={board}
-        setBoard={setBoard}
-        setNumber={setNumber}
-      />
+      <Home board={board} setBoard={setBoard} user={user} />
       <Footer />
     </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;