아이템 28 - 유효한 상태만 표현하는 타입을 지향하기

1. 유효한 상태

효과적으로 타입을 설계하기 위해서, 유효한 상태만 표현할 수 있는 타입을 만들어 내는 것이 가장 중요하다. 여기서 말하는 유효한 상태란 무엇일까? 유효의 사전적 의미를 살펴보면 다음과 같다.

효력이나 효과가 있음.

즉, 효력이나 효과가 있는 상태가 유효한 상태라고 할 수 있다. 프로그래밍 관점에서 살펴보면 어딘가에 사용될 수 있는 상태이다. 다음과 같은 상태가 있다.

interface State {
  a: string;
  b: string;
  c?: string;
  d?: string;
}

이와 같은 상태는 다음과 같이 여러 가지 상태를 포함한다.

interface StateOne {
  a: string;
  b: string;
}

interface StateTwo {
  a: string;
  b: string;
  c: string;
}

interface StateThree {
  a: string;
  b: string;
  d: string;
}

interface StateFour {
  a: string;
  b: string;
  c: string;
  d: string;
}

이 중 내가 원하는 타입이 StateOne, StateTwo, StateThree라면 StateFour는 무효한 상태가 된다. 그러므로 상단에 작성한 State Type은 무효한 상태를 포함하기 때문에 혼란을 초래하기 쉽고 오류를 유발하게 된다.

1-2. 무효한 상태에서 벗어나기

위에서 살펴본 무효한 상태에서 벗어나기 위해선 태그된 유니온을 사용하면 된다. 태그 된 유니온이란? 특정 속성을 통해 값이 속하는 브랜치를 식별할 수 있는 유니온이다. 아래의 예시에선 type 속성이 식별자 또는 태그라 불린다.

interface StateOne {
  type: 'one';
  a: string;
  b: string;
}

interface StateTwo {
  type: 'two';
  a: string;
  b: string;
  c: string;
}

interface StateThree {
  type: 'three';
  a: string;
  b: string;
  d: string;
}

type State = StateOne | StateTwo | StateThree;

이로써 State 타입은 유요한 상태만 표현하는 타입이 된다.

2. 웹 애플리케이션의 페이지 상태 예시

2-1. 무효한 상태를 포함한 상태

어떤 웹 애플리케이션에서 페이지를 선택하면, 페이지의 내용을 로드하고 화면에 표시한다. 이때 페이지의 상태는 다음과 같다.

interface State {
  pageText: string;
  isLoading: boolean;
  error?: string;
}

2-2. 유효한 상태만 포함한 상태

다음은 태그된 유니온을 사용하여 유효한 상태만 포함하도록 리팩터링 한 코드이다. 이때 state 속성이 식별자(태그)가 된다.

interface RequestPending {
  state: 'pending';
}

interface RequestError {
  state: 'error';
  error: string;
}

interface RequestSuccess {
  state: 'ok';
  pageText: string;
}

type RequestState = RequestPending | RequestError | RequestSuccess;

interface State {
  currentPage: string;
  requests: { [page: string]: RequestState };
}

위의 타입을 사용한 changePage 함수는 다음과 같다.

async function changePage(state: State, newPage: string) {
  state.requests[newPage] = { state: 'pending' }; // pending 상태로 변경
  state.currentPage = newPage;

  try {
    const response = await fetch(getUrlForPage(newPage));
    if (!response.ok) {
      throw new Error(`Error: 에러 발생`);
    }
    const pageText = await response.text();
    state.requests[newPage] = { state: 'ok', pageText }; // ok 상태로 변경
  } catch (error) {
    state.requests[newPage] = { state: 'error', error: String(error) }; // error 상태로 변경
  }
}

changePage 함수 내에서 state 의 값에 따라 상태가 바뀌는 것을 볼 수 있다. 더 이상 불필요한 상태인 무효한 상태를 포함하지 않게 된다.

3. 결론

1. 타입을 설계할 때, 어떤 값들을 포함하고 어떤 값들을 제외할지 신중하게 생각해야 한다.
2. 무효한 상태가 있는 타입은 혼란을 초래하기 쉽고 오류를 유발하게 된다.(목숨도 위태롭다.)