[Project] Hobbyt - useState 바로 적용 안 될 때 해결방법

프로젝트를 진행하면서 판매관리의 진행사항을 변경하는 드롭박스 기능을 구현하게 되었다.

드롭박스 안을 모두 button으로 만들고 해당 버튼을 클릭시 patch 요청이 가도록 구현하였다.

하지만 버튼을 두 번 클릭해야 useState의 clickName 이 클릭한 값으로 변경되는 상황이 발생하여 제대로 patch 요청이 보내지지 않았다.

patchData() 를 처음 렌더링은 실행하지 않는 useEffect 커스텀훅을 만들어 거기다가 넣는 방법도 있었지만 우리 로직에선 더 쉬운 방법이 있었기 때문에 그 방법을 사용하기로 하였다.

드롭박스 버튼을 클릭했을 때 실행되는 handleClick 함수의 e.currentTarget.value를 data에 넣어 patch 요청할 때 보내는 방법이다.
전에는 data에 clickName을 넣어 보냈기 때문에 두 번 클릭해야 제대로 된 값이 보내졌던 방면에 해당 방법을 사용해서 쉽게 해결하였다...!

  // 클릭한 이름
  const [clcikName, setClickName] = useState(orderStatus);

  useEffect(() => {}, [clcikName]);

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    const { value } = e.currentTarget;
    setClickName(value);
    setCategorySpread(!categorySpread);

    // 진행사항 변경시 patch 요청
    const data = {
      status: value,
      // status: clcikName,
    };

    const patchData = async () => {
      const res = await patchOrderState(data, orderId);
      return res;
    };
    patchData();
  };

//리턴부분
  return (
    <div className="relative flex flex-col border-2 mr-[2rem]">
      <button
        onClick={spreadOnClickHandler}
        className="flex justify-between p-[0.5rem] w-22 text-sm"
      >
        {clcikName && getStatus(clcikName)}
        {categorySpread ? <AiFillCaretUp /> : <AiFillCaretDown />}
      </button>
      {categorySpread && (
        <div className="absolute z-10 w-full p-1 overflow-hidden text-sm bg-gray-100 border-2 top-9">
          {progressArr.map((progress, idx) => (
            <button
              className="flex py-1 m-auto "
              key={idx}
              onClick={handleClick}
              value={progress.status}
            >
              {progress.title}
              <hr />
            </button>
          ))}
        </div>
      )}
    </div>
  );