회원 가입 페이지 구현

1. 가입페이지 UI 구현.

return (
  // 중앙의 정렬쓰
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: "100vh",
      }}
    >
      //버튼을 눌렀을때 onSubmitHandler 함수 호출
      <form
        style={{ display: "flex", flexDirection: "column" }}
        onSubmit={onSubmitHandler}
      >
         // 이메일, 이름, 패스워드, 패스워드 확인은 값이 바꼈을때 이벤트핸들러 호출 
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        <label>Name</label>
        <input type="text" value={Name} onChange={onNameHandler} />
        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />
        <label>Confirm Password</label>
        <input type="password" value={ConfirmPassword} onChange={onConfirmPasswordHandler} />
        <br />
        <button type="submit">Register</button>
      </form>
    </div>
  );

2. input에 들어온 값을 처리하기 위한 useState()

// email을 위한 state
  const [Email, setEmail] = useState("");
  // name을 위한 state
  const [Name, setName] = useState("");
  // password를 위한 state
  const [Password, setPassword] = useState("");
  // confrim를 위한 state
  const [ConfirmPassword, setConfirmPassword] = useState("");

3. 이벤트 발생 처리

  // input의 내용을 입력할 수 있게
  const onEmailHandler = (event) => {
    setEmail(event.target.value);
  };

  const onNameHandler = (event) => {
    setName(event.target.value);
  };

  const onPasswordHandler = (event) => {
    setPassword(event.target.value);
  };

  const onConfirmPasswordHandler = (event) => {
    setConfirmPassword(event.target.value);
  };

  const onSubmitHandler = (event) => {
    // 새로고침을 막아주기 위해
    event.preventDefault();
    // console.log(`email: ${Email}`);
    // console.log(`password: ${Password}`)

    // 비밀번호 일치 여부
    if(Password !== ConfirmPassword) {
      return alert('비밀번호가 일치하지 않습니다.')
    }

    let body = {
      email: Email,
      name: Name,
      password: Password
    };

    dispatch(registerUser(body));
  };

4. dispatch => action

• types.js 이 부분 추가.

export const REGISTER_USER = "register_user";

• user_actions.js 추가 및 수정

import { LOGIN_USER, REGISTER_USER } from './types';

export function registerUser(dataToSubmit) {
  // body의 데이터를 '/api/users/register' 로 보내고,
  // 서버의 DB에서 데이터를 비교한 후 보내온 가입성공여부 데이터를
  // reducer에서 처리
    const request = axios.post('/api/users/register', dataToSubmit)
        .then(response => response.data)
    return {
        type: REGISTER_USER,
        payload: request
    }
}

5. reducer

• user_reducer.js의 case추가.

case REGISTER_USER:
      return { ...state, registerSuccess: action.payload };

6. 그 처리한 데이터를 state에서 view로.

• RegisterPage.js

//request를 보내고 response의 데이터가 성공이면 로그인 페이지로
//아니면 알림창으로 실패메시지 알림.
dispatch(registerUser(body)).then((response) => {
      if(response.payload.success) {
        props.history.push("/login")
      } else {
        alert("Failed to sign up")
      }
    });

7. 작동 테스트

• 우선 기본 UI
  

• 비밀번호가 다를 경우
  

• 회원가입에 실패한 경우(비밀번호가 최소 5자 이상)
  

-회원가입에 성공한 경우

• 로그인 페이지로 이동
  

ps. react 흐름 읽는게 익숙하지 않아서 정리가 산만한데, 후에 어느 정도 익숙해지면 다시 정리하겠습니다.