TIL72-01 알림 선택하여 삭제하기

해당 알림 선택

• 이전에 프로젝트에서 알림을 받고, 삭제하는 것은 구현 했다. 이제는 알림을 선택하여 선택한 알림들을 삭제하는 기능으로 변경하려고 생각했다.
• 알림을 선택하여 선택 된 알림들을 지우려면 선택한 알림의 ID를 추적하고, 그 ID를 사용하여 선택한 알림을 삭제하는 함수를 작성해야한다.

   const toggleAlarmSelection = (AlarmId) => {
        const index = selectedAlarms.indexOf(AlarmId);
        if (index !== -1) {
            const updatedSelections = [...selectedAlarms];
            updatedSelections.splice(index, 1);
            setSelectedAlarms(updatedSelections);
        } else {
            setSelectedAlarms([...selectedAlarms, AlarmId]);
        }
    };

• 먼저 indexOf 메서드를 사용하여 selectedAlarms 배열에서 AlarmId의 인덱스를 찾는다. 인덱스가 -1이 아닌 경우(즉, AlarmId가 이미 배열에 있음을 의미) splice 메서드를 사용하여 배열에서 제거하고 selectedAlarms 상태를 새 배열로 업데이트한다.

AlarmId가 selectedAlarms 배열에 아직 없으면 확산 연산자 [...selectedAlarms] 및 배열 연결 연산자 [AlarmId]를 사용하여 배열 끝에 추가한다. 새 배열로 selectedAlarms 상태를 업데이트한다.

이 기능은 목록 또는 확인란 그룹에서 항목을 선택 및 선택 해제하는 것과 같이 배열에서 항목 선택을 토글해야 하는 시나리오에서 유용합니다.

선택된 알림 삭제

  const removeSelectedAlarms = () => {
        selectedAlarms.forEach((AlarmId) => {
            dispatch(__removeAlarm(AlarmId));
        });
        setSelectedAlarms([]);
    };

• 업데이트 된 selectedAlarms에 forEach 매서드를 사용하여 AlarmId가 포함된 알림들만 dispatch로 삭제할 AlarmId값을 넘겨준다. 그리고 다시 selectedAlarms 값을 비워준다.