다음의 순서에 맞게 코드를 작성하여 ID, Password <input>에 입력된 값을 state에 저장해주세요.

👇🏻 완성샷

🙋🏻‍♀️ 이제 코드를 하나하나 뜯어보자! ⏱ 시작!!!

import React, { useState } from "react";
import "./Login.scss";
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();
  
  const [ id, setId ] = useState('');
  const [ pw, setPw ] = useState('');
  const inputValue = id.includes('@') && pw.length >=5

  const saveUserld = (event) => {
    setId(event.target.value);  
  }
  // console.log(id);

  const saveUserPw = (event) => {
    setPw(event.target.value);
  }
  // console.log(pw);

  return (
    <div className="login">
      <div className= 'wrapper'>
        <div className='logo'>Westagram</div>
        <div className='input'>
          <input className='id'
            type = 'text'
            onChange = { saveUserld }
            value = { id }
            placeholder="전화번호, 사용자 이름 또는 이메일"/>
          <input className='pw'
            type = 'password'
            onChange = { saveUserPw }
            value = { pw }
            placeholder="비밀번호"/>
        </div>
        <button
          onClick={() => { navigate("/jihye-main") }} 
          className= { inputValue ? 'loginBtn buttonLogin' : 'loginBtn'}
          disabled= {!inputValue}>로그인
        </button>
        <div className='miss'>비밀번호를 잊으셨나요?</div>
      </div>
    </div>
  );
}
export default Login;

📌 1. 사용자 입력 데이터 저장

✅ 0. Link를 useNavigate 로 바꿔준다.

import { useNavigate } from 'react-router-dom';
.
const navigate = useNavigate();
.
.
.
onClick={() => { navigate("/jihye-main") }}

✅ 1. ID <input> 에서 onChange event가 발생한다.

<input className='id'
           type = 'text'
 여기>>>>> onChange = { saveUserld }
           value = { id }
           placeholder="전화번호, 사용자 이름 또는 이메일"/>
  
<input className='pw'
           type = 'password'
  여기>>>>> onChange = { saveUserPw }
           value = { pw }
           placeholder="비밀번호"/>

✅ 2. event 발생 시 saveUserId 함수가 실행된다.

  const [ id, setId ] = useState('');
  const [ pw, setPw ] = useState('');

  const saveUserld;
  const saveUserPw;

뭔가 화면이 구현되지 않아서 확인해보니 useState( )라고 되어있었다.
includes 가 문자열에서만 사용할 수 있기 때문에 useState(' ')라고 입력해야한다.

✅ 3. saveUserId 함수는 이벤트를 인자로 받는다.

  const saveUserld = (event) => { ? }
  const saveUserPw = (event) => { ? }

✅ 4. event가 일어난 요소에 담긴 value 값(event.target.value)을 state에 저장한다.

  const saveUserld = (event) => {
    setId(event.target.value);  
  }
  
  const saveUserPw = (event) => {
    setPw(event.target.value);
    
  // 다른방법
   const saveUserld = (event) => {
     const {value} = event.target;
    setId(value);  
  }

setId 매개변수로 event.target.value 가 들어가는 이유는 이벤트가 일어나는데 어디서 일어나는지, 그리고 값이 뭔지 알기 위해 작성한다. 그리고 매개변수(event)의 이름은 사용자가 다르게 설정할 수 있다.

✅ 5. 위의 과정을 Password <input> 에도 동일하게 적용한다.

✅ 6. 위 순서대로 완료 후, git push 한다.

commit message "Add : Mission 1 - 사용자 입력 데이터 저장 기능 구현"

git branch : 해당 branch를 확인
git add . : 변경내용을 저장
git commit -m "Add : Mission 1 - 사용자 입력 데이터 저장 기능 구현" : 커밋
git push origin 브랜치이름 : 푸시

📌 2. 로그인 버튼 활성화

✅ 1. 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 한다.
색상뿐 아니라 버튼의 disabled 여부도 같이 조작한다.
(e.g. ID - '@' 포함 / Password - 5글자 이상)

  const inputValue = id.includes('@') && pw.length >=5
  .
  .
    disabled= {!inputValue}>로그인

✅ 2. 삼항 연산자를 적용해서 조건에 따라 버튼 색상에 변화를 준다.

	className= { inputValue ? 'loginBtn buttonLogin' : 'loginBtn'}

✅ 3. 위의 과정을 Password <input> 에도 동일하게 적용한다.

✅ 4. 위 순서대로 완료 후, git push 한다.

"Add : Mission 2 - 로그인 버튼 활성화 기능 구현"

💖 완료!

🤔 흐음,,, 오늘의 회고록

일단, useEffect도 그렇고 함수를 설정하고 콜백함수 안에서 변수 설정하는 부분이 아직 많이 헷갈리고 어렵다...ㅠ