🪓 패턴 매칭 기법으로 안전한 조건문 작성을 돕는 ts-pattern

- 패턴 매칭을 사용해 복잡한 조건을 하나의 간결한 표현으로 표현할 수 있습니다.

---

일반적인 명령형 프로그래밍 언어에서는 if, else, switch 등의 키워드를 사용해서 조건문을 구현합니다. 하지만 객체의 속성이나 배열의 요소를 체크해야 하는 로직이 깊어지거나, 비즈니스 로직이 어려워 질수록 코드가 장황해집니다. 이는 가독성을 해치고 유지보수를 어렵게 만드는 요소가 됩니다.

이러한 단점을 극복하기 위해 제안된 ts-pattern은 TypeScript를 활용한 패턴 매칭(pattern match) 기법으로 조건문 작성을 도와줍니다. 패턴 매칭이란 함수형 프로그래밍 언어에서 안전하고 짧은 코드로 조건 분기를 가능하게 해주는 기법입니다.

간단하게 사용법을 설명해보자면, 우선 match 메서드를 통해 평가할 값을 넘깁니다. 그러면 메서드 체이닝을 통해 with, when, exhaustive 등의 함수를 덧붙일 수 있게 됩니다. with는 두 개의 인자를 받는데, 첫 번째 인자가 매칭할 패턴, 두 번째 인자가 콜백입니다. 평가할 값이 패턴의 부분 집합을 만족시킨다면 콜백이 실행되는 구조입니다.

설명이 기니까 코드로 보시는 게 낫겠네요.

const html = match(result)
  .with({ type: 'error' }, () => <p>Oups! An error occured</p>)
  .with({ type: 'ok', data: { type: 'text' } }, (res) => <p>{res.data.content}</p>)
  .with({ type: 'ok', data: { type: 'img', src: P.select() } }, (src) => <img src={src} />)
  .exhaustive();

위 예시 외에도 더 복잡한 패턴에 대한 대응도 가능하고, TypeScript 코드이다 보니 TSX 내에서도 활용이 가능합니다. 제가 일하고 있는 팀에서도 해당 라이브러리를 적극적으로 사용하면서 좀 더 가독성 좋은 조건문을 작성하려고 노력 중입니다. 혹시라도 함수형 프로그래밍에서의 우아한 조건문 분기에 대한 방법을 고민 중이신 분이라면, 이 라이브러리의 도입을 한 번 고려해보세요.

https://github.com/gvergnaud/ts-pattern