<aside> 💡 입력 폼에 대해서 알아보자

</aside>

HTML과 다른 점

onChange

리액트에선 onChange Prop을 사용하면 입력 값이 바뀔 때마다 핸들러 함수를 실행한다. 자바스크립트에서 oninput 이벤트와 같다고 생각하면 된다.

htmlFor

html 코드중 label 태그에서 사용하는 for 속성은 리액트에서 사용하기엔 반복문의 for 키워드와 겹치기 때문에 리액트에서는 htmlFor 를 사용한다.

폼을 다룰 때 기본적인 방법

State 를 만들어 target.value 값을 사용해 값을 변경해 줄 수 있다.

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

function TripSearchForm() {
  const [location, setLocation] = useState('Seoul');
  const [checkIn, setCheckIn] = useState('2022-01-01');
  const [checkOut, setCheckOut] = useState('2022-01-02');

  const handleLocationChange = (e) => setLocation(e.target.value);

  const handleCheckInChange = (e) => setCheckIn(e.target.value);

  const handleCheckOutChange = (e) => setCheckOut(e.target.value);
    
  return (
    <form>
      <h1>검색 시작하기</h1>
      <label htmlFor="location">위치</label>
      <input id="location" name="location" value={location} placeholder="어디로 여행가세요?" onChange={handleLocationChange} />
      <label htmlFor="checkIn">체크인</label>
      <input id="checkIn" type="date" name="checkIn" value={checkIn} onChange={handleCheckInChange} />
      <label htmlFor="checkOut">체크아웃</label>
      <input id="checkOut" type="date" name="checkOut" value={checkOut} onChange={handleCheckOutChange} />
      <button type="submit">검색</button>
    </form>
  )
}

폼 값을 객체 하나로 처리하기

이벤트 객체의 name , value 값을 사용해서 한번에 값을 변경해 줄 수 있기에 객체형 State 하나를 만들어서 관리하면 쉽다

객체형은 스프레드 구문을 이용하여 기존 값과 새로운 값을 같이 나열해야 값이 변경되기 때문에 … 이용해서 State 값을 변경해줘야한다.

또한 prevValues 라는 매개변수를 하나 받아 가장 최신값으로 가져온다 그렇게 하지 않는다면 만약 location 의 속성 값만 바꿔 준다고 했을 때의 값은

loaction , checkIn , checkOut 의 값들이 제대로 나열되지 않으며 loaction 값만 나오게 되므로 의도와는 맞지 않다. 그렇기에 최신값을 가져올 수 있게