Discriminated Union으로 상태 모델링하기

// 이 상태 조합들이 실제로 가능한가?
const state = {
  isLoading: true,
  data: { name: "Kim" }, // 로딩 중인데 데이터가 있다?
  error: "서버 오류",    // 로딩 중인데 에러도 있다?
};

type LoadingState = { status: "loading" };
type SuccessState = { status: "success"; data: string };
type ErrorState   = { status: "error"; message: string };
 
type FetchState = LoadingState | SuccessState | ErrorState;

// 나쁜 예 — boolean 플래그 조합
interface FetchState {
  isLoading: boolean;
  data: string | null;
  error: string | null;
}

// 좋은 예 — 상태마다 명확한 타입
type FetchState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

function render(state: FetchState) {
  switch (state.status) {
    case "idle":
      return null;
    case "loading":
      return <Spinner />;
    case "success":
      // state: { status: "success"; data: string }
      // data 프로퍼티에 안전하게 접근 가능
      return <Content data={state.data} />;
    case "error":
      // state: { status: "error"; message: string }
      return <Error message={state.message} />;
  }
}

// 좋은 판별자 — 리터럴 타입
type State =
  | { kind: "a"; value: string }
  | { kind: "b"; count: number };
 
// 나쁜 판별자 — 리터럴 타입이 아니면 좁혀지지 않는다
type BadState =
  | { kind: string; value: string }  // string이면 모든 string이 해당됨
  | { kind: string; count: number };

// 권장 — 단일 판별자
type Action =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "reset"; value: number };
 
// 복잡 — 여러 필드로 구분 (피하는 게 낫다)
type ComplexState =
  | { isLoading: true; isError: false }
  | { isLoading: false; isError: true; error: string }
  | { isLoading: false; isError: false; data: string };

type AsyncState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error };
 
// 제네릭으로 재사용 가능
type UserState = AsyncState<User>;
type PostsState = AsyncState<Post[]>;

function useAsync<T>(fetchFn: () => Promise<T>) {
  const [state, setState] = useState<AsyncState<T>>({ status: "idle" });
 
  const execute = async () => {
    setState({ status: "loading" });
    try {
      const data = await fetchFn();
      setState({ status: "success", data });
    } catch (error) {
      setState({ status: "error", error: error instanceof Error ? error : new Error(String(error)) });
    }
  };
 
  return { state, execute };
}

type CounterAction =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "reset" }
  | { type: "set"; payload: number };
 
function counterReducer(state: number, action: CounterAction): number {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    case "reset":
      return 0;
    case "set":
      // action: { type: "set"; payload: number }
      return action.payload;
  }
}

type ValidationState =
  | { valid: true; value: string }
  | { valid: false; error: string };
 
function validateEmail(input: string): ValidationState {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (emailRegex.test(input)) {
    return { valid: true, value: input };
  }
  return { valid: false, error: "올바른 이메일 형식이 아닙니다" };
}
 
const result = validateEmail(userInput);
if (result.valid) {
  // result: { valid: true; value: string }
  submitForm(result.value);
} else {
  // result: { valid: false; error: string }
  showError(result.error);
}

type UserRole =
  | { role: "guest" }
  | { role: "member"; userId: string; name: string }
  | { role: "admin"; userId: string; name: string; permissions: string[] };
 
function renderNavigation(user: UserRole) {
  switch (user.role) {
    case "guest":
      return <GuestNav />;
    case "member":
      return <MemberNav name={user.name} />;
    case "admin":
      return <AdminNav name={user.name} permissions={user.permissions} />;
  }
}

function assertNever(value: never): never {
  throw new Error(`처리되지 않은 케이스: ${JSON.stringify(value)}`);
}
 
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };
 
function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.side ** 2;
    default:
      return assertNever(shape); // 모든 케이스를 처리했다면 never
  }
}

type ModalState =
  | { isOpen: false }
  | { isOpen: true; title: string; content: React.ReactNode };
 
function App() {
  const [modal, setModal] = useState<ModalState>({ isOpen: false });
 
  return (
    <>
      <button onClick={() => setModal({ isOpen: true, title: "확인", content: <p>정말요?</p> })}>
        열기
      </button>
      {modal.isOpen && (
        // modal: { isOpen: true; title: string; content: ReactNode }
        <Modal title={modal.title} content={modal.content} />
      )}
    </>
  );
}

type PageState =
  | { phase: "list"; items: Item[] }
  | { phase: "detail"; selectedId: string; item: Item }
  | { phase: "edit"; selectedId: string; draft: Partial<Item> };
 
type PageAction =
  | { type: "SELECT_ITEM"; id: string; item: Item }
  | { type: "START_EDIT" }
  | { type: "BACK_TO_LIST"; items: Item[] }
  | { type: "UPDATE_DRAFT"; field: keyof Item; value: string };
 
function pageReducer(state: PageState, action: PageAction): PageState {
  switch (action.type) {
    case "SELECT_ITEM":
      return { phase: "detail", selectedId: action.id, item: action.item };
    case "START_EDIT":
      if (state.phase !== "detail") return state;
      return { phase: "edit", selectedId: state.selectedId, draft: { ...state.item } };
    case "BACK_TO_LIST":
      return { phase: "list", items: action.items };
    case "UPDATE_DRAFT":
      if (state.phase !== "edit") return state;
      return { ...state, draft: { ...state.draft, [action.field]: action.value } };
  }
}

// 과한 예 — 판별자가 너무 많으면 오히려 복잡해진다
type OverEngineeredState =
  | { status: "idle" }
  | { status: "loading_users" }
  | { status: "loading_posts" }
  | { status: "loading_comments" }
  | { status: "users_success"; users: User[] }
  | { status: "posts_success"; posts: Post[] }
  | ...

// 각 자원마다 독립적인 상태
type UserState = AsyncState<User[]>;
type PostState = AsyncState<Post[]>;
type CommentState = AsyncState<Comment[]>;

// 나쁜 예 — 모든 조합을 일일이 나열
type State =
  | { userStatus: "loading"; postStatus: "loading" }
  | { userStatus: "loading"; postStatus: "success"; posts: Post[] }
  | { userStatus: "success"; users: User[]; postStatus: "loading" }
  | ...
 
// 좋은 예 — 독립적으로 관리
type AppState = {
  users: AsyncState<User[]>;
  posts: AsyncState<Post[]>;
};