TIL) 스파르타 개발일지 23-02-22

 두의 탭이 있고, 이를 선택 시 값이 유지되는 현상이 있었다.

 

정확히는 버튼을 통하여 나타난 리스트가 다른 탭 또는 다른 버튼을 클릭 시 

 

그대로 자리를 차지하고 있어, UI를 해칠뿐더러 유지되는게 정상적으로 보이지는 않았다...

 

처음든 생각은 첫 제품을 클릭 시 선택된 제품의 상태값을 저장하고, 두번째 세번째 제품을 선택시 다르면 반려시키려 했지만.

 

이렇게 구현하면, 상품이 배열에 들어갔다가 맞지않으면, 삭제되는 형식으로 구현되는 것 같았다...

 

비효율적일 뿐더러 코드가 상당히 지저분해졌고, 다른 방법을 강구하던 중,

 

다른 상품을 선택하려하면, 탭을 통해서 이동해야했기 때문에 스테이징된 상품의 값이 존재하면,

 

탭 이동이 불가능하게하여, 다른 상품을 스테이징 하지 못하도록 했고, 자연스럽게 랜더링 중복도 fix하게 되었다!!.

 

이런걸 보고 일거양득이라고 해야하나?..

 

  const handleProductTypeClick = (buttonType) => {
    if (selectedProductIds.some((value) => value !== "")) {
      alert("상품유형을 변경하시려면 선택된 금융상품을 제거해주세요.");
      return;
    }
    setProductTypes(buttonType);
  };