[React] (리액트 공부하기 30) 여러 개의 입력 다루기, null 값 처리하기

1. 여러 개의 입력 다루기

Reservation 컴포넌트는 호텔 예약을 위한 폼을 구성하며, 두 개의 입력 필드를 처리한다.

주요 코드 설명:

function Reservation(props) {
  const [haveBreakfast, setHaveBreakfast] = useState(true);
  const [numberOfGuest, setNumberOfGuest] = useState(2);
  
  const handleSubmit = (event) => {
    alert(`아침식사 여부: ${haveBreakfast}, 방문객 수 :${numberOfGuest}`);
    event.prevenDefault();
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        아침식사 여부:
        <input
          type="checkbox"
          checked={haveBreakfast}
          onChange=((event) => {
            setHaveBreakfast(event.target.checked);
          }} />
      </label>
      <br />
      <label>
        방문객 수:
        <input
          type="number"
          value={numberOfGuest}
          onChange=((event) => {
            setNumberOfGuest(event.target.value);
          }} />
      </label>
        <button type="submit">제출</button>
    </form>
  );
}        

1. useState로 상태 선언:

• haveBreakfast: 아침식사 여부를 저장하는 boolean 값. 초기값은 true.
• numberOfGuest: 방문자 수를 저장하는 숫자. 초기값은 2

2. 아침식사 여부 체크박스:

<input
  type="checkbox"
  checked={haveBreakfast}
  onChange={(event) => setHaveBreakfast(event.target.checked)}
/>

• checked: 체크박스의 상태를 haveBreakfast로 설정.
• onChange: 체크박스를 클릭하면 event.target.checked를 가져와 setHaveBreakfast를 호출해 값을 업데이트.

3. 방문자 수 입력 필드:

<input
  type="number"
  value={numberOfGuest}
  onChange={(event) => setNumberOfGuest(event.target.value)}
/>

• value: 입력 필드에 표시되는 값을 numberOfGuest로 설정
• onChange: 값이 변경될 때마다 setNumberOfGuest를 호출해 state를 업데이트

4. 폼 제출 처리:

const handleSubmit = (event) => {
  alert(`아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}`);
  event.preventDefault();
};

• 폼이 제출되면 alert로 입력값을 표시하고 페이지 리로드를 방지

---

2. Input Null Value

value prop을 가진 입력 컴포넌트에서 null 값을 활용해 사용자가 자유롭게 입력할 수 있도록 처리하는 예제이다.

주요 코드 설명:

const root = ReactDOM.createRoot(rootNode);
root.render(<input value="h1" />);

setTimeout(function() {
  root.render(<input value={null} />);
}, 1000);

1. 초기 렌더링:

root.render(<input value="h1" />);

• value가 "h1"로 설정되어 사용자가 값을 수정할 수 없다.

2. setTimeout으로 1초 후 null로 변경:

setTimeout(function () {
  root.render(<input value={null} />);
}, 1000);

• 1초 후, value를 null로 설정하여 사용자가 값을 수정할 수 있도록 만든다.

동작 원리:

• value에 값을 지정하면: 입력 필드는 해당 값으로 고정되며 수정이 불가
• value={null}로 설정하면: 입력 필드가 사용자 입력을 허용

3. event.preventDefault()

JavaScript와 React에서 이벤트의 기본 동작을 방지하는 데 사용되는 메서드이다.

1. 기본 동작이란?

HTML 요소에 따라 브라우저는 특정 이벤트에 대해 기본적으로 실행되는 동작이 있다.

• 폼 제출 버튼 (<form>): 기본적으로 폼이 제출되면 페이지가 리로드 된다.
• 링크 (<a href="#"): 클릭하면 지정된 URL로 이동하거나, #일 경우 페이지 맨 위로 이동한다.
• 드래그 앤 드롭 이벤트: 기본 파일 업로드 창이 열린다.

이러한 기본 동작을 방지하고, 개발자가 원하는 대로 동작을 제어하기 위해 사용한다.

주의사항

• event.preventDefault()만 호출해도 동작을 막을 수는 있지만, 브라우저의 기본 동작을 바꾸려면 추가 로직이 필요하다.
• preventDefault와 혼동하기 쉬운 stopPropagation:
  • preventDefault: 기본 동작 방지.
  • stopPropagation: 이벤트 버블링(상위 요소로 이벤트 전달)방지.