[TIL] 에러노트📕 - Can't perform a React state update on an unmounted component

요즘 MERN스택으로 로그인 및 회원가입 기능 기반의 보일러 플레이트를 만들어보고 있다.
사실 내가 쓸려고 만들고있다 :)

React, Nodejs(Express), MongoDB 기반으로 제작중이며, 로그인 및 회원가입이 메인 기능인 보일러 플레이트인 만큼 bcrypt를 이용한 패스워드 암호화 및 JWT(JsonWEBToken)을 이용한 토큰 발급 등등, 아직 많이 서툴지만 최소한의 구실은 갖추려고 노력중이다.

로그인페이지를 작업하던 도중 처음보는 에러를 만나게 되었는데, 로그인 컴포넌트에서 이메일, 패스워드를 입력 후 Submit을 날리면 발생하는 에러였다.(Warning이라고 해야하나)

보아하니, Unmounted된 컴포넌트는 상태 업데이트를 수행할 수 없고, 해당 작업은 수행되지는 않지만
메모리 누수가 발생할 수 있으니 useEffect의 cleanup function을 이용해야 한다고한다.

처음엔 어디서 일어나는건지 감이 안잡혔는데, 이것저것 테스트해보니 onSubmitHandler함수 부분에서 컴포넌트의 state를 건드리는 부분이 문제였다.

onSubmitHandler함수는 form에서 submit 시 실행되는 함수이다. 함수 실행 후 사용자가 인풋에 입력한 값은 requestBody라는 객체에 담겨 loginUser라는 액션을 타고 dispatch되게 된다. (이 부분은 리덕스 부분이기에 자세히 설명하진 않겠다.) 그 후 response로 받아오는 loginSuccess 여부에 따라 루트 페이지로 이동할지, 'Login Fail'이란 알림 후 인풋의 이메일 패스워드를 지워준다.

위 에러는 로그인 성공 시 루트 페이지로 이동하게되고, 이동 후 에러가 발생하였다. 생각해보니 루트 페이지로 이동한 시점에선 이미 로그인 컴포넌트는 Unmounted되었지만, setEmail(''), setPassword('')를 통해 state 초기화가 이루어진다. 물론 작동에는 이상없겠지만, 불필요한 작업이니 에러 메세지중
'This is a no-op, but it indicates a memory leak in your application'이란 문장이 포함되어있는것 같다.

이를 해결하기위해 콜백함수를 만들어준뒤 완성도를 높이기위해 추가적으로 조건부 렌더링을 통해 에러메세지를 표시하게끔 해줬다.

로그인 실패시 alert가 아닌, 조건부 렌더링으로 컴포넌트에 실패 메세지가 담긴 텍스트를 삽입시키도록 해주었다.