[React]TypeScript기반 Type Alias vs interface

이번 포스팅에서는 TypeScript 기반의 React 애플리케이션을 개발할 때, Type을 정의하는 방법을 설명합니다.

 

JavaScript는 다른 프로그래밍 언어와는 다르게 변수 또는 객체를 생성할 때, 타입을 정의하지 않습니다.

var arr = {};

// 타입 변환 전
console.log(typeof arr); // object

arr = 5; // 객체를 number타입으로 변환

// 타입 변환 후
console.log(typeof arr); // number

var, let, const 키워드를 사용하여 변수 또는 객체를 생성하므로 타입 변환이 자유롭다는 장점이 있지만, 다음과 같은 단점도 존재합니다.

[JavaScript의 단점]

- 타입을 유추하기 어렵습니다.

- 애플리케이션이 동작할 때(런타임) 타입이 변환되어 에러가 발생할 수 있습니다.

 

TypeScript를 사용하면 JavaScript에서 변수 또는 객체에 타입을 정의할 수 있으며, 위에서 언급한 2개의 단점을 해결할 수 있습니다.

 

Type을 정의하는 방법은 type 키워드 또는 interface 키워드를 사용하여 정의할 수 있는데, 대부분의 책, 강의, 블로그에서는 병합 기능을 지원하는 interface로 Type을 정의할 것을 권유하고 있습니다.

 

하지만, type 키워드도 장점이 존재하기 때문에 type vs interface의 논쟁은 여전히 끝날 기미가 안보입니다. 

 

필자는 type 키워드를 사용합니다.

 

type 키워드를 사용하는 이유는 interface가 더 좋은 기능들이 있는 것은 알고 있지만, 막상 사용할 일이 없어서 type을 선호합니다.

 

그렇기 때문에 이번 포스팅에서는 TypeScript 기반의 React 애플리케이션을 개발할 때, type 키워드로 Type을 정의하는 것이 나은 방법이라는 관점에서 글을 작성합니다.

 

프로그래밍 스타일은 정답이 없기 때문에 interface가 익숙하신 분들은 interface를 사용하시면 되고 "TypeScript에서 타입은 무조건 interface로 정의해야해!"라는 고정관념이 있으신 분들은 포스팅 내용을 가볍게 봐주시면 되겠습니다.

---

React에 대해 알아보기

interface는 주로 객체지향 코드를 작성하는 경우 사용하는 것을 권유하며, type은 함수를 작성하는 경우 사용하는 것을 권유합니다.

 

React는 OOP(객체지향형 프로그래밍)보다 FP(함수형 프로그래밍)에 가까운 라이브러리입니다.

 

16.8부터 지원하는 React Hook은 컴포넌트를 함수로 작성하며, React에서 사용되는 기능들은 대부분 FP 관점에서 나온 기능입니다.

 

그렇기 때문에

React! 함수형 프로그래밍! 함수니깐 type!

이라는 결론이 나옵니다.

 

위 내용처럼 단순하게 생각하면 type을 사용하는게 정답인 거 같지만, React의 장단점, FP와 OOP, 디자인 패턴 등... 종합적으로 고려하면 type을 사용하는 것이 100% 정답이 아닐 수 있습니다.

---

병합의 단점

interface 병합은 동일한 interface를 여러 번 정의하여 이전에 정의한 interface에 속성을 추가하는 기술입니다.

interface IUser {
  name: string
}

// 기존 인터페이스에 age속성을 추가합니다.
interface IUser {
  age: number
}

let obj: IUser = { name: 'NAME', age: 29 };

위 코드는 문법적으로 전혀 문제가 없으며, 정상적으로 동작합니다.

 

interface 병합은 Type을 확장하는 TypeScript의 강력한 기능입니다.

 

하지만, React에서 props 또는 state의 interface를 런타임 시점에 변경하려고 하면 불필요하게 코드가 복잡해지며, 버그가 발생할 수 있습니다.

---

React의 props

props의 Type이 interface로 정의된 경우 고민에 빠지게 됩니다.

이미 정의가 끝난 interface인가? 속성이 추가된 interface인가?
Class 컴포넌트라서 interface로 작성한 것인가? 속성을 추가해야 하는 경우가 많아서 그런가?

 

다른 사람이 props의 Type을 interface로 작성한 의도가 있으면, 위 고민을 해결하기 위해 답을 찾아야 합니다.

 

만약, 의도가 없었다면?

 

답을 찾기까지 소모한 시간을 낭비하게 됩니다.

 

개인적으로 interface는 강력한 기능과 확장성때문에 Type이 명확하게 정의되었다는 느낌이 없습니다.

 

하지만, type은 interface에 비해 Type이 명확하게 정의되었다는 느낌을 받을 수 있습니다.

---

React의 state

React에서 데이터를 관리하는 state는 주로 변수, 객체, 배열입니다.

 

그래서 FP보다는 OOP에 가까운 개념입니다.

 

위에서는 React에서 type을 사용하는 것이 좋다고 말했지만, 모순적이게도 React에서 사용되는 state는 interface로 사용하는 것을 권유합니다.

 

이렇게 되면, props는 type으로 정의하고 state는 interface로 정의하는 문제가 발생합니다.

---

결론

그래서 TypeScript 기반의 React 애플리케이션을 개발할 때, type을 사용해야 하는지? interface를 사용해야 하는지? 에 대한 결론은 없습니다.

 

type이 interface보다 적은 입력을 요구하므로 "type을 사용하겠다!"라는 것도 정답이 될 수 있습니다.

 

회사에서 type을 사용하고 있다면, type을 사용하면 되고 interface를 사용하고 있다면 interface를 사용하면 됩니다.

 

필자의 경우 회사에서 Type 정의를 type으로 하고 있어서 type을 사용하는게 익숙합니다.

 

이제 무언가를 개발해야하는 상황 또는 스타트 업이라면, "모범 사례"를 찾으면 됩니다.

 

모범 사례가 없는 경우 type과 interface 둘 다 사용해보고 프로그래밍 스타일에 적절한 방법을 선택하면 됩니다.

 

결론을 도출하기에는 많은 시간이 소모되겠지만, 실력 향상에 도움이 될 거라 믿습니다.

---

참고

Type vs Interface (React/React-native)

Type aliases vs. interfaces in TypeScript-based React apps

TypeScript Types or Interfaces for React component props