24.2.6 회원 인증 에러 처리하기 관련하여..

[pjj186]

회원 인증 에러메시지를 띄우는 부분에서 로그인에러, 또는 회원가입 에러를 낸 상태에서 로그인페이지 링크를 누르거나 회원가입페이지 링크를 눌러서 이동하면, 에러메시지 박스가 없어지지않고, 남아있습니다.

즉, 로그인페이지에서 "로그인 실패" 라는 메시지를 띄고있는 상태에서 회원가입 페이지로 넘어가면 "회원가입 실패" 라는 에러메시지가 남아있는 현상입니다. 여기서 다시 로그인페이지로 가면 에러메시지는 사라집니다! 최초 1회만 이렇습니다.

useEffect에서 initializeForm함수를 디스패치해서 분명 authError를 null로 만들어줄텐데, 왜 이런 현상이 일어나는지 모르겠습니다.

그래서 혹시 제가 오타를 냈나 싶어서 여기있는 소스를 그대로 긁어서 비교해봤지만 딱히 제가 오타를 낸것도 아니었습니다. reudx 개발자 툴을 이용해 State를 확인해봐도.. authError가 남아있진 않은데 왜 이런 현상이 나타날까요?

[velopert]

늦게 답변드려 죄송합니다.

  // 컴포넌트가 처음 렌더링 될 때 form 을 초기화함
  useEffect(() => {
    dispatch(initializeForm('login'));
  }, [dispatch]);

  useEffect(() => {
    if (authError) {
      console.log('오류 발생');
      console.log(authError);
      setError('로그인 실패');
      return;
    }
    if (auth) {
      console.log('로그인 성공');
      dispatch(check());
    }
  }, [auth, authError, dispatch]);

다시 보니 코드상에 문제가 있었는데요, 위 코드에서 useEffect의 cleanup함수에서 initialize를 한다면 에러가 해결됩니다.

LoginForm

  useEffect(() => {
     return () => dispatch(initializeForm('login'));
  }, [dispatch]);

RegisterForm

  useEffect(() => {
    return dispatch(initializeForm('register'));
  }, [dispatch]);

[jakebox1966]

같은 이슈로 이것 저것 바꿔보고 있는 중입니다. cleanup 함수를 쓰면 redux state는 바뀌지만 RegisterForm 에서는 반영을 하지 못 하는것 같습니다. RegisterForm 으로 넘어왔을때 authError 를 useEffect에서 console 찍어보면 총 두번의 console이 찍히는데 (render가 두번 일어나는) LoginForm에서 발생한 authError가 한번 뜨고 두 번째 console에서 null이 뜨네요. LoginForm 에서 이미 null로 업데이트했을텐데 ... 리덕스 상태업데이트 부분에서 state가 바로 반영되는 것이 아닌 다른 무언가 있는 걸까요... 더군다나 상태가 업데이트 되었다면 화면에 반영이라도 되어야할텐데 그것도 아니니 조금 더 찾아봐야겠습니다....