패턴매칭을 통해 선언적으로 typescript를 다뤄보자

이야기를 시작하며

프론트엔드 개발의 생태계는 점점 복잡해지고 다양해지고 있습니다. 이러한 환경에서 개발자들은 효율적이고 유지보수가 용이한 코드를 작성하기 위해 다양한 라이브러리와 프레임워크를 활용하고 있습니다.

React는 그 중에서도 가장 인기 있는 프론트엔드 라이브러리 중 하나입니다.React는 선언적 프로그래밍을 강조하며, 사용자 인터페이스를 구축하기 위해 컴포넌트 기반 접근 방식을 채택합니다. 이는 상태를 추적하고 UI를 업데이트하는 과정을 명확하고 예측 가능한 방식으로 다룰 수 있게 해줍니다.

Tanstack Query는 데이터를 가져오고 관리하는 데 도움을 주는 라이브러리입니다. 이 라이브러리는 선언적인 쿼리 언어를 사용하여 데이터를 요청하고 처리할 수 있습니다. 선언적인 쿼리는 데이터를 가져오고 변환하는 방법을 명시적으로 정의함으로써 코드의 가독성과 유지보수성을 향상시킵니다.

또한, 상태 관리 라이브러리는 애플리케이션의 상태를 효과적으로 관리하기 위해 사용됩니다. Redux나 MobX와 같은 상태 관리 라이브러리는 선언적인 방식으로 상태를 조작하고 변화를 추적합니다. 이를 통해 애플리케이션의 상태 변화를 예측 가능하게 만들어주고, 복잡한 상태 관리 로직을 추상화하여 개발자의 작업을 간소화합니다.

선언적 프로그래밍은 프론트엔드 생태계에서 중요한 개념입니다. 선언적인 접근 방식을 통해 코드의 의도를 명확하게 표현할 수 있으며, 복잡한 상호 의존성을 줄여줍니다. 이는 유지보수성을 향상시키고 버그를 줄이는 데 도움을 줍니다. 또한, 선언적 프로그래밍은 개발자들이 추상화된 도구와 라이브러리를 효과적으로 활용할 수 있는 기반이 됩니다.

따라서, 프론트엔드 생태계에서 선언적 프로그래밍의 중요성을 이해하고, React, Tanstack Query와 같은 라이브러리를 활용하여 보다 효율적이고 유지보수 가능한 코드를 작성하는 것이 중요합니다.

하지만 javascript와 typescript는 이러한 패러다임을 위해 설계되지 않았습니다.

react, redux, tanstack-query 등 선언적 패러다임을 기반으로 설계되고 있는 인터페이스를 잘 다루기 위해 언어레벨에서 선언적인 코드 분기가 필요함을 느껴 만들어진 라이브러리가 바로 ts-pattern 입니다.

오늘은 이 ts-pattern을 통해 보다 정교하고 타입 안정성 있는 코드를 만들 수 있는 방법을 소개하고자 합니다.

패턴매칭이란

특정 패턴에 맞는 데이터를 찾거나 추출하는 기능은 많은 함수형 프로그래밍 언어에서 사용되는 개념입니다. Haskell, OCaml, Erlang, Rust, Swift, Elixir, Rescript 등 많은 언어에서 이 기능을 지원하고 있습니다.

이러한 기능은 예전부터 사용된 개념으로, 최근에 새롭게 만들어진 것이 아닙니다. 함수형 프로그래밍은 데이터를 조작하고 처리하기 위해 선언적인 방식을 채택하며, 패턴 매칭이라는 메커니즘을 사용하여 특정 패턴을 가진 데이터를 찾거나 추출합니다.

예를 들어, 패턴 매칭을 사용하여 리스트에서 특정 요소를 찾거나, 특정 데이터 구조에서 원하는 값을 추출하는 등의 작업을 수행할 수 있습니다. 이는 함수형 프로그래밍의 핵심 개념 중 하나로, 코드의 가독성과 유지보수성을 향상시키는 데 도움을 줍니다.

다른 언어의 패턴매칭은 어떻게 생겼을까?

Rust에서의 패턴 매칭은 match 키워드를 사용하여 값 또는 데이터 구조를 여러 패턴과 비교합니다. 각 패턴은 변수 바인딩, 구조 분해, 값 비교 등의 방법으로 작성될 수 있습니다. 위 예시에서는 Point 구조체의 인스턴스 p를 여러 패턴으로 매칭시켜 해당하는 패턴에 따라 결과를 출력합니다.

rust

fn main() {
    let p = Point { x: 0, y: 7 };

    match p {
        Point { x, y: 0 } => println!("x값은 x축 위에 있습니다. 값: {}", x),
        Point { x: 0, y } => println!("y값은 y축 위에 있습니다. {}", y),
        Point { x, y } => println!("좌표값: ({}, {})", x, y),
    }
}

Scala에서의 패턴 매칭은 match 키워드를 사용하여 값을 여러 패턴과 비교합니다. 각 패턴은 클래스 또는 케이스 클래스의 인스턴스와 비교됩니다. 위 예시에서는 Point 케이스 클래스의 인스턴스 p를 여러 패턴으로 매칭시켜 해당하는 패턴에 따라 결과를 출력합니다.

scala

case class Point(x: Int, y: Int)

object Main extends App {
  val p = Point(0, 7)

  p match {
    case Point(x, 0) => println(s"x값은 x축 위에 있습니다. 값: $x")
    case Point(0, y) => println(s"y값은 y축 위에 있습니다. $y")
    case Point(x, y) => println(s"좌표값: ($x, $y)")
  }
}

이러한 언어들의 패턴 매칭은 패턴과 값을 비교하고, 해당하는 패턴을 찾을 경우에 대한 동작을 수행하는 방식으로 동작합니다. 이를 통해 데이터의 구조적인 패턴을 활용하여 코드를 보다 간결하고 가독성 좋게 작성할 수 있습니다. 패턴 매칭은 프로그래머에게 직관적인 문법을 제공하여 복잡한 조건문과 분기문을 효과적으로 대체할 수 있습니다.

특정 조건의 데이터를 찾기? 조건문과 무엇이 다를까?

패턴 매칭과 조건문은 비슷한 이유는 그들의 목적이 유사하기 때문입니다. 두 가지 기능은 주어진 조건 또는 패턴에 따라 프로그램의 동작을 분기시키는 역할을 합니다. 그러나 그들은 다른 방식으로 동작하고 사용되는 상황이 조금 다릅니다.

패턴 매칭은 데이터의 구조나 패턴을 중심으로 동작합니다. 데이터의 패턴을 정의하고, 주어진 패턴이나 구조와 비교하여 일치하는 경우에 특정 동작을 수행합니다. 주로 문자열, 리스트, 튜플 등과 같은 데이터 구조에서 패턴을 비교하고, 패턴에 맞는 데이터를 추출하거나 처리하는 데 사용됩니다. 패턴 매칭은 데이터의 구조나 패턴을 기반으로 프로그램의 흐름을 제어하는 유연하고 간결한 방법을 제공합니다.

반면, 조건문은 주어진 조건에 따라 프로그램의 흐름을 분기시키는 역할을 합니다. 주어진 조건이 참(True)인 경우에만 특정 코드 블록을 실행하고, 조건이 거짓(False)인 경우에는 다른 코드 블록을 실행하거나 흐름을 제어합니다. 조건문은 주로 불리언(Boolean) 조건을 기반으로 분기를 결정하며, 특정 조건에 따라 다른 동작을 수행하는 데 사용됩니다. 조건문은 프로그램의 로직을 제어하고 특정 조건에 따라 다른 동작을 수행하는 유용한 기능을 제공합니다.

패턴 매칭과 조건문은 목적과 사용 방식에서 차이가 있지만, 두 가지 모두 프로그램의 제어 흐름을 분기시키는 데 사용되는 기능입니다. 이들은 프로그래밍 언어에서 중요한 개념이며, 코드의 가독성과 유지보수성을 향상시키는 데 도움을 줍니다. 개발자는 상황에 맞게 패턴 매칭과 조건문을 사용하여 프로그램을 효율적으로 제어할 수 있습니다.

자바스크립트에서의 패턴 매칭

예전에는 자바스크립트에서도 패턴 매칭이 제안되었고, TC39의 stage 1 단계 까지 진행되었습니다.

함수형 프로그래밍 언어에서 자주 사용되는 패턴 매칭 기능은 오래된 개념이며, 최근에도 자바스크립트와 같은 언어에서 관심을 받고 있습니다. @babel/plugin-proposal-pattern-matching, xstat, lodash 의 _matchs 를 사용하면 패턴매칭을 자바스크립트에서도 구현할 수 있습니다. 이는 코드의 가독성과 유지보수성을 향상시키는 데 큰 도움을 주는 중요한 개념입니다.

서두에서도 말했듯이 프론트엔드의 코드는 점점 복잡해지고 있고 선언적(functional)으로 표현하고 사고하는 것으로 발전해나가고 있습니다. 사용자 인터페이스 뿐만 아니라 상태관리 또한 XState, Redux 등과 라이브러리를 시작으로 선언적인 코드의 장점이 부곽되고 있습니다. 하지만 아직 javascript와 typescript는 이러한 패러다임을 위해 설계되지 않습니다.

선언적 패러다임을 기반으로 설계되고 있는 인터페이스를 잘 다루기 위해 언어레벨에서 선언적인 코드 분기가 필요함을 느껴 만들어진 라이브러리가 바로 오늘 소개하고자 하는 ts-pattern 입니다.

ts-pattern 소개

자바스크립트에서의 패턴 매칭

ts-pattern은 타입스크립트에서 패턴 매칭을 구현할 수 있게 해주는 라이브러리입니다.

ts-pattern은 TypeScript를 위한 패턴 매칭 라이브러리로, 코드의 가독성과 유지보수성을 향상시키는 데 도움을 주는 도구입니다. 이 라이브러리는 TypeScript에서 구조적 패턴 매칭을 구현하기 위한 간결하고 강력한 문법을 제공합니다.

ts-pattern을 사용하면 데이터 구조의 패턴을 정의하고, 주어진 데이터를 패턴과 비교하여 패턴에 일치하는 경우에 대한 동작을 정의할 수 있습니다. 이는 복잡한 조건문 대신 선언적이고 간결한 코드를 작성할 수 있게 해줍니다.

예시와 함께 알아보는 ts-pattern

간단한 예시

import { match } from 'ts-pattern';

type Weather = '맑음' | '구름' | '비' | '눈';

const getWeatherDescription = (weather: Weather): string => {
  return match<Weather, string>(weather)
    .with('맑음', () => '오늘은 맑은 날이네요! 선크림을 꼭 챙기세요.🕶️')
    .with('구름', () => '오늘은 구름이 낀 날이에요.🌥️')
    .with('비', () => '오늘은 비가 오네요! 꼭 우산을 챙기세요.🌧️')
    .with('눈', () => '오늘은 눈이 오네요! 눈사람 만들 준비가 되셨나요?☃️')
    .exhaustive(() => '유효하지 않은 날씨입니다.');
};

const currentWeather = 'sunny';
const weatherDescription = getWeatherDescription(currentWeather);
console.log(weatherDescription); // 오늘은 맑은 날이네요! 선크림을 꼭 챙기세요.🕶️

위의 예시 코드는 getWeatherDescription 함수를 통해 주어진 weather 값에 따라 해당하는 날씨 설명을 반환합니다. match 함수를 사용하여 weather 값과 매칭되는 내용을 선택합니다. 이를 통해 타입 안정성을 유지하면서 각 경우에 대한 설명을 제공할 수 있습니다.

위의 코드를 실행하면 currentWeather 값이 'sunny'이므로 _'오늘은 맑은 날이네요! 선크림을 꼭 챙기세요.🕶️' 라는 메시지가 출력됩니다.

이처럼 ts-pattern을 활용하면 조건에 따라 다른 로직을 간결하게 구현할 수 있고, 패턴 매칭을 통해 예상치 못한 경우에 대한 처리까지 강력하게 다룰 수 있습니다.

하지만 이정도는 간단하게 조건문으로도 처리할 수 있습니다.

const getWeatherDescription = (weather: Weather): string => {
  let weatherDescription: string;

  if (weather === '맑음') {
    weatherDescription = '오늘은 맑은 날이네요! 선크림을 꼭 챙기세요.🕶️';
  } else if (weather === '구름') {
    weatherDescription = '오늘은 구름이 낀 날이에요.🌥️';
  } else if (weather === '비') {
    weatherDescription = '오늘은 비가 오네요! 꼭 우산을 챙기세요.🌧️';
  } else if (weather === '눈') {
    weatherDescription = '오늘은 눈이 오네요! 눈사람 만들 준비가 되셨나요?☃️';
  } else {
    throw new Error('유효하지 않은 날씨입니다.');
  }

  return weatherDescription;
};

const currentWeather = 'sunny';
const weatherDescription = getWeatherDescription(currentWeather);

흐음.. 그렇군요. 그럼 타입스크립트에서 이런 상황은 어때요?

더욱 복잡한 예시

declare let fetchState:
  | { status: { label: "loading" }}
  | { status: { label: "success" }, data: string }
  | { status: { label: "error" }, message: string };

// switch 사용
switch (fetchState.status.label) {
  case "loading":
    console.log("로딩중..");
    break;
  case "success":
    console.log("성공! 데이터: ", fetchState.data); //type error!
    break;
  case "error":
    console.error("에러: ", fetchState.message); //type error!
    break;
}

// if 사용
if (fetchState.status.label === "loading") {
  console.log("로딩중..");
} else if (fetchState.status.label === "success") {
  console.log("성공! 데이터: ", fetchState.data); //type error!
} else if (fetchState.status.label === "error") {
  console.error("에러: ", fetchState.message); //type error!
}

perty 'message' does not exist on type '{ status: { label: "loading"; }; } | { status: { label: "success"; }; data: string; } | { status: { label: "error"; }; message: string; }'.
Property 'message' does not exist on type '{ status: { label: "loading"; }; }'

현재 코드는 if-else문으로 적었을 때 타입 변경이 매우 취얍합니다. 현재 코드에서는 fetchState의 타입에 또 다른 상태(ex. { label: "idle" })가 추가되더라도, 코드에서 어떤 상태에 따라 분기하는 부분에서 에러가 발생하지 않습니다. 이로 인해 개발자는 상태를 추가한 후에도 상태에 따라 분기하는 코드를 모두 살펴봐야 하는 번거로움이 발생할 수 있습니다.

상태 분기에 따른 타입 추론이 되지 않을 수 있습니다: 예를 들어, fetchState.status.label이 "success"인 경우에는 fetchState.data 필드가 존재한다는 사실을 알 수 있지만, 타입스크립트의 타입 시스템은 이를 인지하지 못합니다. 따라서 개발자는 타입 캐스팅 또는 추가적인 null 체크와 같은 방법을 사용하여 타입 정보를 활용할 수 있어야 합니다.

위 문제를 해결하기 위해 다음과 같은 개선 방향을 고려할 수 있습니다

match(fetchState)
  .with({ status: { label: "loading" } }, () => console.log("로딩중.."))
  .with({ status: { label: "success" } }, ({ data }) =>
    console.log("성공! 데이터: ", data)
  )
  .with({ status: { label: "error" } }, ({ message }) =>
    console.error("에러: ", message)
  )
  .exhaustive();

ts-pattern을 통해 타입 추론이 자연스럽게 됩니다. with 함수의 콜백에는 패턴에 맞는 데이터가 타입 추론이 된 채로 넘어오기 때문에, 아래와 같이 원래 코드에서는 올바르게 타입 추론이 되지 않던 data 와 message 모두 올바른 타입 정보와 함께 사용할 수 있습니다.

타입 변경 시에 타입스크립트의 도움을 최대한 받을 수 있습니다. ts-pattern의 .exhaustive() 는 fetchState 의 가능한 값을 처리하는 with 함수가 없다면 컴파일 에러를 발생시킵니다.

예를 들어서, idle와 같이fetchState에 가능한 상태를 하나 추가하면, 컴파일 에러가 발생해 개발자가 이를 통해 수정해야 할 부분을 쉽게 포착할 수 있게 됩니다.

코드를 통해 알아본 ts-pattern의 장단점

ts-pattern의 장점

• 더 간결하고 읽기 쉬운 코드를 작성할 수 있습니다.
• 타입 안정성을 제공하여 패턴 매칭의 누락된 경우를 컴파일 타임에 감지할 수 있습니다.
• 복잡한 패턴 매칭을 처리하기에 유용합니다.

ts-pattern의 단점

• 추가적인 라이브러리로 의존성을 추가해야 합니다.
• 프로젝트에 이미 많은 의존성이 있다면 번들 사이즈가 커질 수 있습니다.
• 조건문에 비해 학습 곡선이 좀 더 높을 수 있습니다.

글쓴이의 생각

어떤 방식이 더 나은지는 개인적인 선호와 프로젝트의 요구사항에 따라 다를 수 있습니다.간단한 패턴을 처리해야 한다면 switch, if 문이 좋은 선택이 될 때도 많았습니다. 하지만 복잡한 패턴을 다루거나 타입 안정성을 높이고자 한다면 ts-pattern 도입을 고려해보는 것을 추천합니다.

긴 글 읽어주셔서 감사합니다!