React useState hook (Typescript 에서)

boolean type 을 가지는 간단한 useState

---

import { FC, useState } from 'react'

export const App: FC = () => {
    const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

    const handleLogin = () => {
        setIsLoggedIn(true);
    };

    const handleLogout = () => {
        setIsLoggedIn(false)
    };

    return (
    <div>
        <button onClick={handleLogin}>Login</button>
        <button onClick={handleLogout}>Logout</button>
        <div>Use is {isLoggedIn ? 'Logged in' : 'Logged out'}</div>
    </div>
    );
};

 

단순히 boolean type을 지정해 주기만 하면 사용하는 데에 지장이 없다.

 

사용자 지정 타입의 경우도 비슷하게 적용가능하다

type AuthUser = {
    name: string,
    email: string,
};

사용자 커스텀 type인 AuthUser을 이용한 useStateHook

import { FC, useState } from 'react';

type AuthUser = {
  name: string;
  email: string;
};

export const App: FC = () => {
  const [user, setUser] = useState<AuthUser | null>(null);    // 초기값을 null로 설정하기 위해 유니온을 사용했다

  const handleLogin = () => {
    setUser({
      name: 'joe',
      email: 'joe@gmail.com',
    });
  };

  const handleLogout = () => {
    setUser(null);
  };

  return (
    <div className='container'>
      <div className='input-div mb-2'>
        <button className='button' onClick={handleLogin}>
          Login
        </button>
        <button className='button ml-2' onClick={handleLogout}>
          Logout
        </button>
      </div>
      {user !== null && (
        <div className='output-div'>
          <div>User name is {user.name}</div>
          <div>User email is {user.email}</div>
        </div>
      )}
    </div>
  );
};

별 다른 것 없이 boolean type을 사용하는 것 처럼 useState뒤에 <>으로 지정해 준 다음 사용해 주면 된다

 

초기값을 null이 아닌 AuthUser 타입의 빈 객체로 만들 수는 없을까?

---

이 때 사용되는 것이 type assertion 이다. {} as ~ 의 형태로 타입을 지정해 줄 수 있다

export const App = () => {
    const [user, setUser] = useState<AuthUser>({} as AuthUser);

    .... 이하생략

전체 적용시

import { FC, useState } from 'react';

type AuthUser = {
  name: string;
  email: string;
};

export const App: FC = () => {
  const [user, setUser] = useState<AuthUser>({} as AuthUser);

  const handleLogin = () => {
    setUser({
      name: 'joe',
      email: 'joe@gmail.com',
    });
  };

  const handleLogout = () => {
    setUser(null);
  };

  return (
    <div className='container'>
      <div className='input-div mb-2'>
        <button className='button' onClick={handleLogin}>
          Login
        </button>
        <button className='button ml-2' onClick={handleLogout}>
          Logout
        </button>
      </div>
      {user !== null && (
        <div className='output-div'>
          <div>User name is {user.name}</div>
          <div>User email is {user.email}</div>
        </div>
      )}
    </div>
  );
};