[React] useState, 비구조 할당, onChange

• useState()
  • const [변수, set변수] = useState(초기값);
    • 초기값: 정수, “” 등
    • 초기값 배열로 주는것도 가능

    • const [form, setForm] = useState({
          id: 1,
          name: "홍길동",
          address: "인천",
          phone: "032-0101-0202",
        });
        
       const { id, name, address, phone } = form;

  • 변수와 set변수 사용 가능

 

• 비구조 할당
  • 배열 안의 키값들을 키이름으로 바로 사용할 수 있게 할당
  • 태그 안에서 value={code} 이런식으로 사용 가능

  • const [product, setProduct] = useState({
        code: 103,
        name: "",
        price: "",
        qnt: "",
      });
      
      const { code, name, price, qnt } = product;

 

• 사용자가 input 안에 값을 입력시 바로 변경
  • onChange 함수 사용
  • input 태그에 onChange={onChangeForm} 값 주기

  • const onChange = (e) => {
        setProduct({
          ...product,
          [e.target.name]: e.target.value,
        });
      };
      
     const onChangeForm = (e) => {
        setForm({
          ...form,
          [e.target.name]: e.target.value,
        });
      };