24.2.4 회원가입 구현

    바로 회원가입 기능을 구현해 봅시다. 오류 처리는 나중에 할 것이므로, 지금은 신경 쓰지 말고 코드를 작성해 보세요.

    containers/auth/RegisterForm.js

    import React, { useEffect } from 'react';
    import { useDispatch, useSelector } from 'react-redux';
    import { changeField, initializeForm, register } from '../../modules/auth';
    import AuthForm from '../../components/auth/AuthForm';
    
    const RegisterForm = () => {
      const dispatch = useDispatch();
      const { form, auth, authError } = useSelector(({ auth }) => ({
        form: auth.register,
        auth: auth.auth,
        authError: auth.authError
      }));
      // 인풋 변경 이벤트 핸들러
      const onChange = e => {
    (...)
      };
    
      // 폼 등록 이벤트 핸들러
      const onSubmit = e => {
        e.preventDefault();
        const { username, password, passwordConfirm } = form;
        if (password != = passwordConfirm) {
          // TODO: 오류 처리
          return;
        }
        dispatch(register({ username, password }));
      };
    
      // 컴포넌트가 처음 렌더링될 때 form을 초기화함
      useEffect(() => {
        dispatch(initializeForm('register'));
      }, [dispatch]);
    
      // 회원가입 성공/실패 처리
      useEffect(() => {
        if (authError) {
          console.log('오류 발생');
          console.log(authError);
          return;
        }
        if (auth) {
          console.log('회원가입 성공');
          console.log(auth);
        }
      }, [auth, authError]);
    
      return (
        <AuthForm
          type="register"
          form={form}
          onChange={onChange}
          onSubmit={onSubmit}
        />
      );
    };
    
    export default RegisterForm;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.