리액트 폼 다루기

React에서는 속성을 변경할 수 없다.
그럼에도 불구하고 변경 가능한 속성이 몇 가지 있다.

• value: input, textarea, select 태그
• checked: input태그에 type = "checkbox" or type = "radio"인 경우 적용
• selected: select 태그와 함께 option 태그를 사용할 때 적용

Input

type = "radio"

import React, { useState } from 'react';

function RadioExample() {
  const [isChecked, setIsChecked] = useState({react: false, javascript: true});

  const handleRadioChange = (event) => {
  	let obj = {};
    obj[event.target.value] = event.target.checked //true
    setIsChecked(obj);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="react"
          checked={isChecked['react']}
          onChange={handleRadioChange}
        />
        <input
          type="radio"
          value="javascript"
          checked={isChecked['javascript']}
          onChange={handleRadioChange}
        />
      </label>
    </div>
  );
}

export default RadioExample;

type = "checkbox"

import React, { useState } from 'react';

function CheckboxGroupExample() {
  const [checkedItems, setCheckedItems] = useState({});

  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;
    setCheckedItems({ ...checkedItems, [name]: checked });
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="option1"
          value="Option 1"
          checked={checkedItems['option1'] || false}
          onChange={handleCheckboxChange}
        />
        Option 1
      </label>
      <br />
      <label>
        <input
          type="checkbox"
          name="option2"
          value="Option 2"
          checked={checkedItems['option2'] || false}
          onChange={handleCheckboxChange}
        />
        Option 2
      </label>
      <br />
      <label>
        <input
          type="checkbox"
          name="option3"
          value="Option 3"
          checked={checkedItems['option3'] || false}
          onChange={handleCheckboxChange}
        />
        Option 3
      </label>
      <br />
    </div>
  );
}

export default CheckboxGroupExample;

그 외의 요소

radio or checkbox 타입이 아닌 input, textarea, select와 option요소는 value속성을 사용한다.
이 요소들은 value가 변경될 때 onChange이벤트가 발생한다.