react-quill이라는 텍스트 에디터를 사용하는데요 (이미지첨부 기능도있음)
이미지를 올리면 aws s3에 바로 올라가서 url을 받아옵니다.
근데 이렇게하면 사용자가 이미지 올렸다가 취소하던가, 뒤로가기를 누르면 aws s3에있는걸 지워야하는데요
이 지우는 기능을 개발했는데
뒤로가기 탐지에서 애를 먹고있습니다.
const [fileNames,setFileNames] =useState([]); //이거는 파일 이름을 저장해줍니다.
// 페이지 뒤로가기 클릭할 시
// 이미지 삭제
useEffect(() => {
const onPopstate = (currentFileNames ) => {
console.log(fileNames);
if (currentFileNames && currentFileNames.length > 0) {
console.log('currentFileNames', currentFileNames);
currentFileNames.forEach(async (fileName) => {
// fileName && (await deleteImageFromS3(fileName));
});
}
};
window.addEventListener('popstate', () => onPopstate(currentFileNames ));
return () => {
window.removeEventListener('popstate', () => onPopstate(currentFileNames ));
};
}, [fileNames]);
이런식으로 구현을해놨는데요..
게시글 저장하고 다시 수정하려고 그 페이지를 방문후, 뒤로가기를 누르면
이미지가 지워져버려요..
그러니깐 동작이 어떻게되고있냐면
1. 게시글 저장 (이미지까지올림)
2. 게시글 수정누르고 수정페이지 입성
3. 뒤로가기 누르면 뒤로가기 이벤트발동, 이미지 삭제됨
???
그래서 콘솔찍어보니까
뒤로가기 이벤트 내에서 fileNames가 콘솔에 찍힙니다.
예를들면 ['파일명.jpg'] 이렇게 찍혀버려요..
근데 또 웃긴건 뒤로가기 이벤트 밖에서 fileNames를 콘솔에 찍으면 [] 빈 어레이만 출력해줍니다.
그래서 나름대로 알아보니까 뭐 히스토리인가.. 뭔가 저장을하고있는거같은데 아니면 클로저나.. 이런 영향인거같은데
이런경우 어떻게해줘야할까요?
질문이 넘 중구난방이라 ,... 죄송합니다
