[Ionic-React] 회원가입 페이지 만들기

1. 개요

앞서 배웠던 routing을 이용해 간단한 회원가입 페이지를 만들어 보았다.

유저정보를 입력 후 회원가입 버튼을 클릭해 콘솔에 정보를 띄우자.

2. 코드 상세

  //App.tsx
const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home" component={Home} />
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
        <Route path="/login" component={Login} exact/>
        <Route path="/resister" component={Resister} exact/>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

//resister.tsx
const Resister: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [cpassword, setSPassword] = useState("");

  function resisterUser() {
    console.log(`username: ${username}, password: ${password}, confirm Password: ${cpassword}`);
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Resister Page</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonInput
          value={username}
          type="text"
          placeholder="Username?"
          onIonChange={(e: any) => setUsername(e.target.value)}
        />
        <IonInput
          value={password}
          type="password"
          placeholder="Password?"
          onIonChange={(e: any) => setPassword(e.target.value)}
        />
        <IonInput
          value={cpassword}
          type="password"
          placeholder="Confirm Password?"
          onIonChange={(e: any) => setSPassword(e.target.value)}
        />
        <IonButton onClick={resisterUser}>Resister</IonButton>

        <p>
          Already have an account? <Link to="/login">Login</Link>
        </p>
      </IonContent>
    </IonPage>
  );
};

export default Resister;

3. 결과물