Udemy - 양식 및 사용자 입력 작업 (폼)

 

form이란?

입력값 추출(제출 관리, 값 추출..등등)  & 데이터 검증(어렵다!, 오류 일찍 나타나는 문제)

 

 

htmlFor: 무슨프로퍼티냐 (for와 똑같은 속성)

 

 

폼은 제출할때마다 새로고침 됨!!

>> event.preventDefault()로 방지

import{ useState } from ''

export default function Login() {
  function handleSubmit(event){
    event.preventDefault();
  }


  return (
    <form onSubmit={handleSubmit}>
      <h2>Login</h2>

      <div className="control-row">
        <div className="control no-margin">
          <label htmlFor="email">Email</label>
          <input id="email" type="email" name="email" />
        </div>

        <div className="control no-margin">
          <label htmlFor="password">Password</label>
          <input id="password" type="password" name="password" />
        </div>
      </div>

      <p className="form-actions">
        <button className="button button-flat">Reset</button>
        <button className="button">Login</button>
      </p>
    </form>
  );
}

 

---

사용자 입력 관리

 

- 사용자가 입력한 값에 접근 -> useState로 input value 관리

 ㄴ 음 이거 확실히 이해함

예를 들어 input에서 onChange에  useState의 두번째 매개변수를 호출하는 함수를 집어넣어놔서 값 변경때마다 갱신될수 있게

(onChange={(e) => setValue(e.target.value)} 패턴)

 

- 여러 개의 필드일 경우 useState({}) 또는 useReducer 사용

value= {enteredEmail} // 초기값이 이걸로 보이게 한거임

(event) => handleInputChange // 익명함수가 입력값으로 event 객체를 얻음

아니 여기 머라는; - 이따 한번 더보기 

 

import { useState } from "react";

export default function Login() {
  // const [enteredEmail, setEnteredEmail] = useState("");
  // const [enteredPassword, setEnteredPassword] = useState("");
  const [enteredValues, setEnteredValues] = useState({
    email: "",
    password: "",
  });

  function handleSubmit(event) {
    event.preventDefault();

    console.log(enteredValues);
  }

  function handleInputChange(identifier, event) {
    setEnteredValues((prevValues) => ({
      ...prevValues,
      [identifier]: event.target.value,
    }));
  }

  // function handleEmailChange(event) {
  //   setEnteredEmail(event.target.value);
  // }

  // function handleEmailChange(event) {
  //   setEnteredEmail(event.target.value);
  // }

  function handlePasswordChange(event) {
    setEnteredPassword(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Login</h2>

      <div className="control-row">
        <div className="control no-margin">
          <label htmlFor="email">Email</label>
          <input
            id="email"
            type="email"
            name="email"
            onChange={(event) => handleInputChange("email", event.target.value)}
            value={enteredValues.email}
          />
        </div>

        <div className="control no-margin">
          <label htmlFor="password">Password</label>
          <input
            id="password"
            type="password"
            name="password"
            onChange={(event) => handleInputChange("password", event.target.value)}
            value={enteredValues.password}
          />
        </div>
      </div>

      <p className="form-actions">
        <button className="button button-flat">Reset</button>
        <button className="button">Login</button>
      </p>
    </form>
  );
}

 

 

 

어오 코드 붙여넣기 귀찮아

흠,,

 

useRef 

useRef()는 DOM에 직접 접근하는 방식

 ㄴ 간단한 입력값만 읽을때

- reloading되지 않음

const email = useRef();
<input ref={email} />
.....
<button onClick={() => console.log(email.current.value)}>확인</button>

\

 

FormData, 네이티브 브라우저 APi 값 수집

- FormData는 <form>에서 자동으로 모든 필드값을 추출해줌

- new FormData(formElement)로 전체 필드 값 수집

 

 

 

Form 초기화

-  button 타입 reset으로,,

- 입력값 초기화는 useState('');

 

 

 

State로 매번 키보드 입력마다 유효성 검사하기

onChange에 validate() 함수 추가

https://velog.io/@imzzuu/React-Input-control-과-useRef의-적절한-사용-Input-유효성-검사

React | Input control 과 useRef의 적절한 사용 (+ Input 유효성 검사)

 

 

 

onBlur

흠 머라는거

따로 찾아보겠다

 

https://velog.io/@niboo/React-onFocus-와-onBlur이벤트를-사용하여-인풋창-색상-변경하기

[React] onFocus 와 onBlur이벤트를 사용하여 인풋창 색상 변경하기

 

 

custom Input Hook

아니 나느 왜 강의가 더 어려운가? 머라는건가???

https://velog.io/@jungmiin/React-커스텀-훅-사용하기-useFetch-useInput

[React] 커스텀 훅 사용하기 (useFetch, useInput)

https://gggimmin-development-technology.tistory.com/47

[ React ] 공통된 로직, 기능을 깔끔하게! " Custom Hooks "