useState, useEffect 활용 문제

import React from 'react';
import './App.scss';

function App() {
  const [inputs, setInputs] = React.useState({
    email: '',
    password: ''
  });

  const onInputChange = (event) => {
    const { name, value } = event.target;

    setInputs(prev => ({ ...prev, [name]: value }));
  }

  return (
    <form className="app">
      <div>
        <label>
          Email
          <input
            className="emailInput"
            value={inputs.email}
            placeholder="@ 포함 입력"
            onChange={onInputChange}
            name="email" />
        </label>
      </div>
      <div>
        <label>
          Password
          <input
            className="input_style"
            value={inputs.password}
            placeholder="7자 이상 입력"
            onChange={onInputChange}
            name="password" />
        </label>
      </div>
      <button disabled={!passValid}>로그인</button>
    </form>
  );
}
export default App;

🙋🏻‍♀️💻 useState와 useEffect를 사용하여 문제해결하기

email 입력란에 '@'이 포함되고, password 입력란에 7자 이상이면 로그인 버튼을 누를 수 있고, 아니라면 로그인 버튼이 비활성화 되게 작성해보자!

import React, {useState, useEffect} from 'react'; //--> useState와 useEffect 를 사용할 것.
import './App.scss';

function App() {
  const [inputs, setInputs] = React.useState({
    email: '',
    password: ''
  }); //--> 현재 email과 password는 빈 string 상태.
  
  const [passValid, setPassValid] = useState(false); //--> 현재 false 기 때문에 버튼은 disabled 상태.

  const onInputChange = (event) => {
    const { name, value } = event.target;

    setInputs(prev => ({ ...prev, [name]: value }));
  }
  
  useEffect(() => {
    const isValid = inputs.email.includes('@') && inputs.password >= 7
    setPassValid(isValid) //--> isValid가 true면 setPassValid도 true. 즉, passValid도 true.
    
  },[inputs.email, inputs.password]) //--> email과 password의 변화가 있을 떄마다 useEffect안의 함수를 실행한다.

  return (
    <form className="app">
      <div>
        <label>
          Email
          <input
            className="emailInput"
            value={inputs.email}
            placeholder="@ 포함 입력"
            onChange={onInputChange}
            name="email" />
        </label>
      </div>
      <div>
        <label>
          Password
          <input
            className="input_style"
            value={inputs.password}
            placeholder="7자 이상 입력"
            onChange={onInputChange}
            name="password" />
        </label>
      </div>
      <button disabled={!passValid}>로그인</button>
    </form>
  );
}
export default App;