AuthForm에서 에러를 보여 주기 위한 준비를 마쳤습니다. 이제 상황에 따라 RegisterForm 컴포넌트와 LoginForm 컴포넌트에서 에러를 나타내 봅시다.

LoginForm에서 에러를 처리하는 것이 더 쉬우니 LoginForm부터 수정해 보세요.

containers/auth/LoginForm.js

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { changeField, initializeForm, login } from '../../modules/auth';
import AuthForm from '../../components/auth/AuthForm';
import { check } from '../../modules/user';

const LoginForm = ({ history }) => {
  const [error, setError] = useState(null);
  (...)

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

  (...)

  return (
    <AuthForm
      type="login"
      form={form}
      onChange={onChange}
      onSubmit={onSubmit}
      error={error}
    />
  );
};

export default withRouter(LoginForm);

---