useState

LoggedIn.tsx
import { useState } from "react";

export const LoggedIn = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };
  const handleLogout = () => {
    setIsLoggedIn(false);
  };
  return (
    <div>
      <button onClick={handleLogin}>Login</button>
      <button onClick={handleLogout}>Logout</button>
      <div>사용자는 {isLoggedIn ? "logged in" : "logged out"}</div>
    </div>
  );
};

 

User.tsx
import { useState } from "react";

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

export const User = () => {
  const [user, setUser] = useState<AuthUser | null>(null);
  const handleLogin = () => {
    setUser({
      name: "강현",
      email: "hyunleo@naver.com",
    });
  };
  const handleLogout = () => {
    setUser(null);
  };
  return (
    <div>
      <button onClick={handleLogin}>Login</button>
      <button onClick={handleLogout}>Logout</button>
      <div>유저의 이름은 {user?.name}</div>
      <div>유저의 이메일은 {user?.email}</div>
    </div>
  );
};

• const [user, setUser] = useState<AuthUser | null>(null);
• 이 제네릭 부분은 useState hook과 함께 유니온 타입을 사용하려면, 제네릭 타입으로 유니온 타입을 전달해야한다.
• user?.name과 user?.email는 null이 나올수도 있기 때문에 ?를 붙여주는 것

App.tsx
import "./App.css";
import { LoggedIn } from "./components/state/LoggedIn";
import { User } from "./components/state/User";

function App() {
  return (
    <div className="App">
      <LoggedIn></LoggedIn>
      <User></User>
    </div>
  );
}

export default App;

as로 상태 초기화

User.tsx
import { useState } from "react";

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

export const User = () => {
  const [user, setUser] = useState<AuthUser>({} as AuthUser);
  const handleLogin = () => {
    setUser({
      name: "강현",
      email: "hyunleo@naver.com",
    });
  };
  return (
    <div>
      <button onClick={handleLogin}>Login</button>
      <div>유저의 이름은 {user.name}</div>
      <div>유저의 이메일은 {user.email}</div>
    </div>
  );
};

const [user, setUser] = useState<AuthUser>({} as AuthUser); as는 오직 AuthUser 타입의 객체만 가질 수 있게 한다는 의미. 초기값으로 빈 객체를 사용하기 때문에 'user.name', 'user.email'에 접근하면 기본적으로 'undefined'값만 반환.

as키워드 : TypeScipt에게 나는 이 타입이 올바르다고 확신한다는 의미.