react : styled component

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\\reportWebVitals.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js":"4"},{"size":500,"mtime":499162500000,"results":"5","hashOfConfig":"6"},{"size":362,"mtime":1612328420362,"results":"7","hashOfConfig":"6"},{"size":648,"mtime":1612342222317,"results":"8","hashOfConfig":"6"},{"size":196,"mtime":1612336218178,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"11g3wnd",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"15","messages":"16","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["19","20"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\reportWebVitals.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",["21"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],{"ruleId":"22","replacedBy":"23"},{"ruleId":"24","replacedBy":"25"},{"ruleId":"26","severity":1,"message":"27","line":9,"column":16,"nodeType":"28","messageId":"29","endLine":9,"endColumn":23},"no-native-reassign",["30"],"no-negated-in-lhs",["31"],"no-unused-vars","'setList' is assigned a value but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
+[{"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",[]]

react-springboot/my-app/package.json

@@ -9,6 +9,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
+    "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

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

@@ -1,27 +1,10 @@
-import { createRef, useRef, useState } from 'react';
 import './App.css';
+import LoginPage from './pages/LoginPage';
 
 function App() {
-  // useRef (디자인)
-  // dom 을 변경할 때 사용
-  const ref = useRef(null);
-
-  const [list, setList] = useState([
-    { id: 1, name: 'kim' },
-    { id: 2, name: 'hong' },
-  ]);
-
-  const refs = Array.from({ length: list.length }).map(() => createRef());
-
   return (
     <>
-      <button onClick={() => (refs[0].current.style.backgroundColor = 'red')}>
-        색변경
-      </button>
-      <div ref={ref}>박스</div>
-      {list.map((user, index) => (
-        <h1 ref={refs[index]}>{user.name}</h1>
-      ))}
+      <LoginPage />
     </>
   );
 }

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

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

react-springboot/my-app/src/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/my-app/src/components/Footer.js

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

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

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

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

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

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

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import Login from '../components/Login';
+import { Title } from '../Style';
+
+const LoginPage = () => {
+  return (
+    <div>
+      <Header />
+      <Title>Hello</Title>
+      <Login />
+      <Footer />
+    </div>
+  );
+};
+
+export default LoginPage;

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

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

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

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';