배열의 길이를 이용하여 새글이 추가됐는지를 추적하고자 함
1. useState를 이용하여 배열의상태와 알람이 켜졌는지를 추적함
const [allErrors, setAllErrors] = useState<{ [key: string]: any }[]>([]);
const [isAlarmChecked, setIsAlarmChecked] = useState(true);
2. useEffect를 이용하여 배열의 정보가 업데이트가 되는 것을 추적
useEffect(() => {
const farmCodes = Object.keys(groupedMessages);
let tempAllErrors:{[key:string]:any}[] = [];
farmCodes.forEach(farmCode => {
const { errorList, robot, farmName } = groupedMessages[farmCode];
if (errorList && errorList.length > 0 && robot.length > 0) {
tempAllErrors = [...tempAllErrors, ...errorList.map(error => ({
...error,
farmCode,
farmName,
}))];
}
});
setAllErrors(tempAllErrors);
}, [groupedMessages]); // groupedMessages가 변경될 때마다 알람 목록 업데이트
useEffect(() => {
if (allErrors.length > 0) {
setIsAlarmChecked(false); // 새로운 알람이 있을 경우 빨간점 표시
}
}, [allErrors.length]);
3. 특정버튼을 클릭시 알람이 체크된 것을 표시하고 isAlarmChecked을 컴포넌트에 전달
setIsAlarmChecked(true)
'React' 카테고리의 다른 글
레벨 별 사운드 구현하기 (0) | 2024.04.17 |
---|---|
fetch를 위해 알아본 자료들 (0) | 2024.04.02 |
로컬스토리지에 값 저장하기 (0) | 2024.03.22 |
modal dialog component만들기 (0) | 2024.03.20 |
필터기능 구현 (0) | 2024.03.18 |