[React] 대분류,소분류 리스트 추가 및 delete

아직 전체적으로 정리가 된 코드는 아니지만 혹시, 프론트 단에서 리스트 추가가 어려운 분들이 참고하실수도 있을 듯하여 

글을 남겨 본다.

이번에 진행한 component는

1.대분류 리스트 삭제 , 

2.대분류 리스트 내에 소분류 데이터 추가 후 하단에 출력

3.대분류 리스트 내 소분류 데이터 삭제 

가 가능하며, 가상 배열을 초기값으로 지정하여 출력해놓았다.

import React, { useState, useRef, useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Lists = () => {
  const navigate = useNavigate();
  const [smcategory, setSmCategory] = useState(false);
  const smRef = useRef();
  const bgRef = useRef();
  const [smarr, setSmArr] = useState([]);
  const [bglist, setBgList] = useState("");
  const [allarr, setAllArr] = useState([]);
  const alreadyAll = [
    ["abc", "cde", "fgh"],
    ["1abc", "1cde", "1fgh"],
    ["2abc", "2cde", "2fgh"],
  ];
  useEffect(() => {
    setAllArr(alreadyAll);
  }, []);
  const showSmCategory = () => {
    if (bgRef.current.value === "") {
      alert("대분류 적어주세요");
    } else {
      setSmCategory(!smcategory);
      setBgList(bgRef.current.value);
    }
  };

  const smCategorize = () => {
    if (smRef.current.value === "") {
      alert("적어주세요");
    } else {
      if (bgRef.current.value === "") {
        alert("대분류 값은 왜 비웠을까영?");
      } else {
        setSmArr(smarr.concat(smRef.current.value));
        smRef.current.value = "";
      }
    }
  };
  const onClickDeleteSm = (e) => {
    const delTarget = e.target.parentNode.firstChild.innerText;
    const filterArr = smarr.filter((el) => el !== delTarget);
    console.log(delTarget);
    setSmArr(filterArr);
  };
  const onClickDeleteBg = (e) => {
    setBgList("");
    setSmArr([]);
    bgRef.current.value = "";
    setSmCategory(false);
  };
  const addList = () => {
    if (bgRef.current.value === "") {
      alert("대분류 값이 비었습니다.");
    } else {
      allarr.push(smarr.concat(bglist));
      setBgList("");
      setSmArr([]);
      bgRef.current.value = "";
      setSmCategory(false);
      console.log(allarr);
    }
  };
  const onDeleteResultList = (e) => {
    const delTarget = e.target.parentNode.firstChild.firstChild.innerText;
    let filterAll = allarr.filter((el) => el[el.length - 1] !== delTarget);
    setAllArr(filterAll);
  };
  const onDeleteAllResultList = () => {
    setAllArr([]);
  };
  const submitList = () => {
    console.log(allarr);
    navigate("/addbook");
  };
  return (
    <InnerLayout>
      <TopMenu />
      <div className="bg-gray-600 rounded-lg p-4">
        <div className="flex justify-between items-center gap-x-3">
          <span>대분류</span>
          <input
            ref={bgRef}
            className="bg-transparent border rounded-lg outline-none w-3/4 p-1"
          />
          <span
            className="inline-block w-[24px] h-[24px] border rounded-full flex justify-center items-center"
            onClick={showSmCategory}
          >
            +
          </span>
        </div>

        {smcategory && (
          <div className="flex gap-x-3 items-center pt-2 ">
            <span>소분류</span>
            <input
              ref={smRef}
              className="bg-transparent border rounded-lg outline-none w-3/4 p-1"
            />
            <span
              className="inline-block w-[24px] h-[24px] border rounded-full flex justify-center items-center"
              onClick={smCategorize}
            >
              +
            </span>
          </div>
        )}
        <div
          className={
            bglist !== ""
              ? "flex flex-col gap-y-1  rounded-lg mt-4 p-3"
              : "hidden"
          }
        >
          <div className="bg-gray-700 rounded-lg p-3">
            {bglist && (
              <div className="flex justify-between pb-2 pr-2">
                <span className="text-lg break-all w-5/6">{bglist}</span>
                <span
                  className="inline-block border rounded-full p-1 text-xs"
                  onClick={onClickDeleteBg}
                >
                  닫기
                </span>
              </div>
            )}
            <div className="flex flex-col gap-y-2 ">
              {smarr.map((el, idx) => (
                <div
                  key={idx}
                  className="flex gap-x-4 justify-between items-center p-2 bg-gray-500 rounded-lg"
                >
                  <span className="w-5/6 break-all ">{el}</span>
                  <span
                    className="inline-block border rounded-full p-1 text-xs"
                    onClick={onClickDeleteSm}
                  >
                    닫기
                  </span>
                </div>
              ))}
            </div>
          </div>
          <div
            className="mt-4 w-full p-3 rounded-lg bg-gray-700 text-center
      hover:bg-gray-900 cursor-pointer"
            onClick={addList}
          >
            리스트추가
          </div>
        </div>
      </div>
      {allarr.length !== 0 && (
        <div className="bg-gray-500 rounded-lg p-4 flex flex-col gap-y-3">
          {allarr.map((el, idx) => (
            <div key={idx} className="flex justify-between ">
              <div>
                <div className="text-red-800">{el[el.length - 1]}</div>
                <div className="flex flex-col">
                  {el.length > 1 &&
                    el
                      .slice(0, el.length - 1)
                      .map((sub, subidx) => <span key={subidx}>{sub}</span>)}
                </div>
              </div>

              <span className="cursor-pointer" onClick={onDeleteResultList}>
                X
              </span>
            </div>
          ))}
          <div className="flex justify-between">
            <span className="cursor-pointer border" onClick={submitList}>
              목록 저장
            </span>
            <span
              className="cursor-pointer border"
              onClick={onDeleteAllResultList}
            >
              remove all
            </span>
          </div>
        </div>
      )}
    </InnerLayout>
  );
};

export default Lists;