[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;

//login.tsx
const Login: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  function loginUser() {
    console.log(`username: ${username}, password: ${password} `);
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Example 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)}
        />
        <IonButton onClick={loginUser}>Login</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Login;

3. 결과물

현재까지 느낀바로는 리액트에서 파생된 프레임워크라서 리액트와 아주 유사하다고 생각된다.