[React] 값 추가(concat), 삭제(filter)

• 사용자 입력 값으로 배열 추가/삭제 함수
  • 추가
    • concat 사용
    • onRegister={onRegister} 으로 적용 후 버튼 클릭시 onRegister(product); 가 실행되도록

      • const onRegister = (product) => {
            const newData = products.concat(product);
            setProducts(newData);
          };

    • 입력 완료시 input 입력 박스는 초기화

      • if (window.confirm("상품을 등록하시겠습니까?")) {
                onRegister(product);
                setProduct({
                  code: ++newCode.current,
                  name: "",
                  price: "",
                  qnt: "",
                });

  • 삭제
    • filter 사용하여 해당 id가 아닌 것들은 거르기
    • 해당 값을 제외한 배열을 가져온다.

      • const onDelete = (code) => {
            if (window.confirm(`${code}번 상품을 삭제하시겠습니까?`)) {
              const newData = products.filter((p) => p.code !== code);
              setProducts(newData);
            }
          };

    • 삭제 버튼
      • <Button onClick={() => onDelete(p.code)} variant="danger"> 으로 해당 키값을 가져와서 삭제
      • <button onClick={() => onDelete(add.id)}>삭제</button>

 

• 예시

  •   const onRegister = (form) => {
        const newAddress = address.concat(form);
        setAddress(newAddress);
      };
    
      const onDelete = (id) => {
        if (window.confirm(`${id}번 주소를 삭제하시겠습니끼?`)) {
          const newAddress = address.filter((add) => add.id !== id);
          setAddress(newAddress);
        }
      };