리엑트 입력 폼 다루기

 

리엑트 입력 폼

 

1. HTML과 다른점

1) onChange
: Prop을 사용하면 입력 값이 바뀔 때마다 핸들러 함수를 실행한다.

- oninput 이벤트와 같다고 생각하자.

 

2. 폼을 다루는 기본적인 방법
: state를 만들고 target.value 값을 사용해서 값을 변경해 줄 수 있다.

- value Prop으로 state 값을 내려주고, onChange Prop으로 핸들러 함수를 넘겨준다.

 

const handleChange = (e) => {
	e.target.value  
};

 

<input value={values.title} onChange={handleChange} />

 

 

 

3. 폼 값을 객체 하나로 처리
: 각각의 state로 관리하는게 아니라 하나의 state에서 관리 할 것!

onSubmit 
: 웹 개발에서 자주 사용하는 이벤트 

 

import React, { useState } from 'react';

function ReviewForm() {
  const [values, setValues] = useState({
    title: '',
    rating: 0,
    content: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value, // 대괄호 표기법
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <form className="ReviewForm" onSubmit={handleSubmit}>
      <input value={values.title} onChange={handleChange} />
      <input type="number" value={values.rating} onChange={handleChange} />
      <textarea value={values.content} onChange={handleChange} />
      <button type="submit">확인</button>
    </form>
  );
}

export default ReviewForm;

 

 

4. 기본 submit 동작 막기
: 이벤트 객체의 preventDefault를 사용한다.

 

const handleSubmit = (e) => {
  e.preventDefault();
  // ...
}