HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
👨🏻‍💻
달리 2팀
/
Today We Learned
Today We Learned
/
component unmounted CleanUp Issue
component unmounted CleanUp Issue
component unmounted CleanUp Issue

component unmounted CleanUp Issue

생성일
Nov 22, 2021 04:47 AM
기록자
해결 여부
해결 여부
속성
React
카테고리
이슈
Event
Component
LifeCycle

🔍 배경 및 궁금증

오우... 또 useEffect 문제가 떴다.
이는 또 unmounted가 됐는데, 왜 호출하냐는 뉘앙스의 문제 였다. ^-^
매우 불편하였으나... 우리는 개발자다. 비효율적이거나 메모리에 치명적이라면 해결해야 한다.
따라서 어떻게 하면 cleanUp을 최적화할 수 있을지 고민했다.

📢 해결 방법

해결 방법은 굉장히 간단했다.
생각해보면, 만약 마운트가 되었다면 실행시켜주는 로직으로 바꿔주면 되는 것이 아닐까? 싶었다.
그렇다면 마운트가 해제될 때에는 해당 메모리를 사용하지 않는다면, 나머지는 리액트가 최적화되어 메모리를 정리해주기 때문이다.
 
따라서 다음 useEffect에서 전역 context를 관리해주었다.
notion image
 
뒷정리 함수는 mounted를 아니라고 해주기만 하면, 절대 fillUserInfo가 호출될 일이 없을 것이다.
그렇게 나는, 30분이라는 꽤나 빠른 시간 안에 지옥 속에서 나올 수 있었다.
unmount에 관한 에러가 뜬다면, 앞으로 useEffect부터 점검하는 거다!
💡
이제, cleanup 함수 경고 따위는 웃으면서 해결할 수 있다😁
notion image
 

참고 자료

https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm