session09

18_강재영/react_project/src/index.js

@@ -5,11 +5,12 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import Project1 from './session08/Project1';
 import Login from './session08/Login';
+import Custom_Hook_Login from './session09/Custom_Hook';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <Login />
+    <Custom_Hook_Login />
   </React.StrictMode>
 );
 

18_강재영/react_project/src/session09/Custom_Hook.js

@@ -0,0 +1,66 @@
+import React,{useState} from "react";
+import styled from "styled-components";
+import Input from "./Input";
+
+
+
+function Custom_Hook_Login() {
+  const [emailValue, setEmail]=useState('')
+  const [pwValue, setPw]=useState()
+  const [textValue, setText]=useState('')
+
+  const submitHandler = (event) => {
+    event.preventDefault()
+    console.log(emailValue)
+    console.log(pwValue)
+    console.log(textValue)
+    setEmail('');
+    setPw("");
+    setText("");
+    }
+    const saveText = event => {
+        setText(event.target.value);
+        // console.log(event.target.value);
+      };
+  const saveEmail = event => {
+    setEmail(event.target.value);
+    // console.log(event.target.value);
+  };
+  const savePw = event => {
+    setPw(event.target.value);
+    // console.log(event.target.value);
+  };
+
+  const StyledButton = styled.button`
+    background-color: green;
+    color: white;
+    font-size: 50px;
+`;
+    function Button() {
+    return (
+    <StyledButton>Login</StyledButton>
+    )
+    }
+  return (
+    <div className="Custom_Hook_Login">
+    <form onSubmit={submitHandler}>
+    <p><label>ID</label></p>
+    <input type="text" name="text" value={textValue} onChange={saveText}></input>    
+    <p><label>Email</label></p>
+    <input type="email" name="email" value={emailValue} onChange={saveEmail}></input>
+    <p><label>Password</label></p>
+    <input type="password" name="password" value={pwValue} onChange={savePw}></input>
+    <br></br>
+    <br></br>
+    <Button type='submit'>Login</Button>
+    <h1>{textValue}</h1>
+    <br></br>
+    <h1>{emailValue}</h1>
+    <br></br>
+    <h1>{pwValue}</h1>
+    </form>
+    </div>
+    );
+}
+
+export default Custom_Hook_Login;

18_강재영/react_project/src/session09/Input.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Input =({type, name, value, onChange})=>{
+    return (
+        <div>
+            <input
+            type={type}
+            name={name}
+            value={value}
+            onChange={onChange}
+            ></input>
+        </div>
+      );
+};
+
+export default Input;