React에서 실제 값은 변경 정상 하지만 화면은 변경 안됨 해결

리액트에서 아래의 코드는 값은 변경되지만 화면에서 어떤 값이 삭제되지 않는다. 이유는 가상 dom에서 리랜더링 되지 않기 때문이다. 

 

const delOptPart = (option_idx:number, optPart_idx:string) => {
    
    const selectedOpt = options.find(option => option.option_index === option_idx);
    const newOptionParts = selectedOpt!.option_parts!.filter(optPart => optPart.optPart_idx !== optPart_idx);
    delete selectedOpt?.option_parts;
    selectedOpt!.option_parts = newOptionParts!;
    console.log("selectedOpt", selectedOpt!);
    //6.18 테스트 필요
  }

 

해결 방법 중 useState를 넣고 삭제 카운트를 넣었다.  

const [delOpPartCount, setDelOpPartCount] = useState(0);🌟
const delOptPart = (option_idx:number, optPart_idx:string) => {
    //삭제 sensor 
    setDelOpPartCount((prev) => prev+1);🌟
    const selectedOpt = options.find(option => option.option_index === option_idx);
    const newOptionParts = selectedOpt!.option_parts!.filter(optPart => optPart.optPart_idx !== optPart_idx);
    delete selectedOpt?.option_parts;
    selectedOpt!.option_parts = newOptionParts!;
    console.log("selectedOpt", selectedOpt!);
    //6.18 테스트 필요
}