PlayData 백엔드 부트캠프 Start 25일차

RE act 정말 지긋지긋해서 그냥 정리 한번 하고 가겠습니다.

오늘 수업시간에 한 내용을 하나 하나 뜯고 맛보고 즐기면서 차근 차근 생각해보고 모르면 아쉬운걸로 하겠습니다. 

 내가 죽나 React가 죽나 해보죠 뭐

<App.js> - main이 되는 부분입니다.

import React, { useState } from 'react';
import AddUsers from './components/Users/AddUsers';
import UserList from './components/Users/UserList';
import MainHeader from './components/SideEffect/MainHeader/MainHeader';
import Login from './components/SideEffect/Login/Login';

const App = () => {
  // 로그인 상태를 기억하는 변수
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 서버로 로그인을 요청하는 함수. (나중에 비동기 방식으로 실제 요청이 들어갈 것.)
  const loginHandler = (email, password) => {
    if (email === 'abc1234' && password === 'aaa1111') {
      // 로그인 성공
    } else {
      // 로그인 실패
      alert('로그인 실패입니다.');
    }
  };

  return (
    <>
      <MainHeader />
      <main>
        <Login />
      </main>
    </>
  );
};

export default App;

• 여기서 상단에 import 000 from './...' 부분은 각 각 나눠서 알아보겠습니다.
  './...' 부분에 있는 JavaScript파일에서 000이름으로 가져오겠다는 것을 뜻합니다. 
• const App= () => {} dms App이라는 함수를 만들겠다는 것입니다.
•  const [isLoggedIn, setIsLoggedIn] = useState(false); 이 부분은 false를 초기값으로하여 두가지  isLoggedIn, setIsLoggedIn를 배열형태로 리턴해주겠다는 의미입니다. 
• const loginHandler = (email, password) => {
      if (email === 'abc1234' && password === 'aaa1111') {
        // 로그인 성공
      } else {
        // 로그인 실패
        alert('로그인 실패입니다.');
      }
    };
  에서는 loginHandler라는 함수를 불러오는데 emil이라는 변수와password라는 변수를 받아 실행시키겠다는  것으로 파악이 가능합니다. 아래는 JAVA와 같은 if문이므로 넘어갑니다. 
• return (
      <>
        <MainHeader />
        <main>
          <Login />
        </main>
      </>
    );
  };
  여기서 리턴문은 보여주는 요소입니다.  </mainheader >,</login ><Main>태그를 화면에 띄워주겠다는 의미입니다.
  
  
        
  
    

import React, { useState } from 'react';
import Card from '../../UI/Card';
import styles from './Login.module.css';
import ButtonComponent from '../../UI/Button';

const Login = () => {
  // 이메일 입력값을 저장
  const [enteredEmail, setEnteredEmail] = useState('');

  // 패스워드 입력값을 저장
  const [enteredPw, setEnteredPw] = useState('');

  // 이메일 입력이 정상적인지를 확인
  const [emailIsValid, setEmailIsValid] = useState();

  // 패스워드 입력도 정상적인지 확인
  const [pwIsValid, setPwIsValid] = useState();

  // 이메일, 패스워드가 둘 다 동시에 정상적인 상태인지 확인.
  const [formIsValid, setFormIsValid] = useState(false);

  // 이메일이 변경될 때마다 실행할 핸들러
  const emailChangeHandler = (e) => {
    setEnteredEmail(e.target.value);

    setFormIsValid(e.target.value.includes('@') && enteredPw.trim().length > 6);
  };

  // 비밀번호가 변경될 때마다 실행할 핸들러
  const passwordChangeHandler = (e) => {
    setEnteredPw(e.target.value);

    setFormIsValid(
      e.target.value.trim().length > 6 && enteredEmail.includes('@'),
    );
  };

  const validateEmailHandler = () => {
    setEmailIsValid(enteredEmail.includes('@'));
  };

  const validatePasswordHandler = () => {
    setPwIsValid(enteredPw.trim().length > 6);
  };

  const submitHandler = (e) => {
    e.preventDefault();
    console.log('submit 동작함!');
  };

  return (
    <Card className={styles.login}>
      <form onSubmit={submitHandler}>
        <div
          className={`${styles.control} ${!emailIsValid ? styles.invalid : ''}`}
        >
          <label htmlFor='email'>E-Mail</label>
          <input
            type='email'
            id='email'
            value={enteredEmail}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler} // blur는 focus의 반대.
          />
        </div>
        <div
          className={`${styles.control} ${!pwIsValid ? styles.invalid : ''}`}
        >
          <label htmlFor='password'>Password</label>
          <input
            type='password'
            id='password'
            value={enteredPw}
            onChange={passwordChangeHandler}
            onBlur={validatePasswordHandler}
          />
        </div>
        <div className={styles.actions}>
          <ButtonComponent
            type='submit'
            className={styles.btn}
            disabled={!formIsValid} // button은 disabled를 통해 비활성화 기능 구현. true면 비활성, false면 활성
          >
            Login
          </ButtonComponent>
        </div>
      </form>
    </Card>
  );
};

export default Login;

 

•   const submitHandler = (e) => {
      e.preventDefault();
  submitHandler 라는 함수에서 e라는 매개변수를 불러서 작동한다 .
  form안에 submit역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우사용한다.submit이 작동하기는 함.
  
  
• <Card className={styles.login}> 위에서 import한 css파일을 입힌다.
• <form onSubmit={submitHandler}> Submit을 하게되면 submitHandler를 이용한다.
  
  
  일단 여기까지가 오늘 실습한것중 3번째 정도 됩니다. 
  생각보다 1시간 가까이 해석하면서 살펴봤는데 적은 것들은 제가 놓친것 모르는 것들을 정리한것입니다. 
  저는 진짜 이제 성장했습니다. 

 

리엑트 별거 있네 ㅠㅠ