📌유저가 채팅방을 벗어날때 unmount 이벤트가 제대로 실행되지 않는 오류
채팅방에서 나갈 시에 발생할 이벤트를 useEffect의 클린업 함수에 넣어 처리하려 했으나 버튼 실행시에만 제대로 동작할 뿐, nav link나 브라우저 새로고침에서는 제대로 동작하지 않는 이슈가 있었음.
그래서 무엇이 문제일까 고민하다 언마운트에 대한 개념이 잘 못 잡혀있었다는 것을 깨달음.
페이지 언마운트(Page Unmount):
페이지 언마운트는 웹 애플리케이션의 라우팅과 관련이 있습니다. 웹 애플리케이션은 여러 페이지로 구성되며, 각 페이지는 다른 컴포넌트나 라우트로 표현됩니다. 페이지 언마운트는 특정 페이지가 사용자에게 보이지 않게 되면 해당 페이지의 컴포넌트가 언마운트될 때 발생합니다. 이것은 주로 프론트엔드 프레임워크나 라이브러리(예: React, Vue, Angular)에서 사용됩니다. 페이지 이동 시 이전 페이지의 컴포넌트는 언마운트되고, 새로운 페이지의 컴포넌트가 마운트됩니다.
브라우저 언마운트(Browser Unmount):
브라우저 언마운트는 웹 브라우저 자체와 관련이 있습니다. 이것은 웹 페이지를 닫거나 새로운 URL을로드할 때 발생하는 것을 의미합니다. 브라우저 언마운트는 웹 페이지의 전체 언로드를 나타내며, 이 과정에서 웹 페이지에 포함된 모든 리소스와 스크립트가 해제되고 현재 페이지와 관련된 프로세스가 종료됩니다.
요약하면, 페이지 언마운트는 웹 애플리케이션에서 특정 페이지나 컴포넌트의 언마운트를 나타내며, 브라우저 언마운트는 전체 웹 페이지가 언로드되는 과정을 나타냅니다. 페이지 언마운트는 프론트엔드 개발과 관련이 있고, 브라우저 언마운트는 웹 브라우저 동작과 관련이 있습니다.
=> useEffect 안 클린업 함수는 컴포넌트의 언마운트에 관여하기 때문에 웹페이지의 전체 unload 과정엔 영향을 미치지 않음.
그래서
let isUnloading = false; // 상태 변수 추가
window.addEventListener("beforeunload", async function (e) {
if (!isUnloading) {
alert("통화가 종료됩니다.");
console.log("기능확인");
await setShouldSubmit(true);
await handleUnload();
setTimeout(async () => {
isUnloading = true;
navigate("/dashboard");
window.location.reload();
}, 1000);
}
});
async function handleUnload() {
try {
if (socketRef.current && myPeerRef.current) {
const message = await `${userInfoRef.current.nickname} 나감!`;
console.log("emit END message:", message);
await socketRef.current.emit("end", message);
await socketRef.current.disconnect();
console.log("연결 해제");
await myPeerRef.current.close();
}
} catch (error) {
console.error("에러 발생:", error);
// 에러 처리 로직 추가
}
}로 unload 직전 이벤트를 발생시키는 이벤트 리스너를 통해 이벤트를 적용해주었음.
📌언마운팅 이벤트와 관련된 메모리 누수 트러블 슈팅
통화를 마칠 때 사용하는 마지막 이벤트를 적용하는
if (socketRef.current) {
const HandeleEndEvent = async (message: any) => {
console.log("통화종료!");
console.log("message", message);
alert(`${message}`);
await onClickEndCalling();
};
socketRef.current.on("end", HandeleEndEvent);
}
와 관련하여 언마운팅 시 이벤트가 발생해야하기 때문에 event off로 처리하지 못해 메모리 누수가 발생함 => 그래서 socket.io가 연결해제되고 나서도 기록이 남아 매칭을 다시 진행했을때 매칭기록이 남아 진행되지 않는 문제가 발생함.
=> beforeunload 이벤트에는window.location.reload();를 사용하고 상단 nav에는 useNavigate 대신 새로고침과 함께 브라우저 이동을 시키는 window.location.replace(url) 를 사용해 강제로 새로고침함으로써 캐시를 초기화시켜줌.
