TIL70-01 알람페이지 알람 읽음 처리하기

• 알람페이지 진입시 모든 알람을 읽음처리해주는 기능을 구현하려했고, 다음과 같은 순서로 생각하여 로직을 짰다.
  1. 알람 페이지에 진입할 때, 알람 데이터를 모두 가져온다.
  2. 가져온 알람 데이터 중에서 읽지 않은 알람이 있는지 확인한다.
  3. 읽지 않은 알람이 있다면, 해당 알람들을 모두 읽음 처리한다.

// 알람 페이지에 진입할 때, 모든 알람 데이터를 가져오고 읽지 않은 알람이 있다면 모두 읽음 처리한다.
useEffect(() => {
    async function markAllAlarmsAsRead() {
        const alarms = await dispatch(__getAlarm());
        const unreadAlarms = alarms.filter(alarm => !alarm.isRead);
        if (unreadAlarms.length > 0) {
            unreadAlarms.forEach(alarm => {
                dispatch(__readAlarm(alarm.id));
            });
        }
    }
    markAllAlarmsAsRead();
}, []);

• 위 코드에서 markAllAlarmsAsRead() 함수가 알람 페이지에 진입할 때, 알람 데이터를 가져와서 읽지 않은 알람이 있다면 모두 읽음 처리한다. - 이 함수는 useEffect 훅의 두 번째 인자로 빈 배열을 전달하여, 컴포넌트가 처음 마운트될 때 한 번만 실행된다.

• 따라서, 알람 페이지에 처음 진입할 때 읽지 않은 알람이 있다면 모두 읽음 처리되며, 그 후로는 새로운 알람이 추가될 때마다 읽지 않은 알람이 있을 때만 해당 알람을 읽음 처리하면 된다.