타입스크립트를 사용하는 환경에서, 부모 컴포넌트로부터 전달받는 props 데이터가 때로는 여러 유형으로 나눠질 수 있다. 본문에서 다룰 props의 경우, group과 tab 두 가지로 타입이 분류 될 것이다. 자식 컴포넌트에서 이러한 데이터를 렌더링할 때(React를 기반으로 한 내용을 다루고 있다.)에는 조건문을 활용한 타입 가드와 as 키워드를 이용한 타입 단언이라는 두 가지 접근법을 고려해볼 수 있다. 이제 이 두 방법의 장단점과 함께 예제 코드를 함께 살펴보자!
타입 가드(Type Guard) 이해하기
Type Guard는 변수나 객체의 타입을 런타임에 안전하게 확인하는 방법이다. TypeScript에서는 타입 가드를 사용하여 실제 타입을 더 정확하게 좁힐 수 있다.
- 장점: 런타임에서 타입의 안정성이 높아진다. 잘못된 타입 사용으로 인한 오류를 줄일 수 있다.
- 단점: 코드가 조금 더 길어질 수 있으며, 모든 가능한 프로퍼티나 메서드를 명시적으로 검사해야 할 수도 있다.
let content: string;
if ("group" in item) {
content = item.group;
} else if ("content" in item) {
content = item.content;
} else {
content = "";
}
코드 설명: 여기서 사용하는 in 연산자는 객체가 특정 프로퍼티를 가지고 있는지 확인하는 데 사용된다.
if ("group" in item)은 item이 group 프로퍼티를 포함하고 있는지 검사한다. 포함하고 있다면 content에 그 값을 할당한다.
else if 절은 item이 content 프로퍼티를 포함하고 있는지 확인하고, 해당 값을 content 변수에 할당한다.
마지막 else 절은 item이 위의 두 프로퍼티 중 어느 것도 포함하고 있지 않을 때 실행된다. 이 경우, content에 빈 문자열을 할당하여 undefined나 다른 예기치 않은 값으로부터 보호한다.
이 방법을 사용하면, 런타임에 item의 실제 구조를 검사하여 안전하게 값을 할당하게 된다.
타입 단언(Type Assertion) 이해하기
Type Assertion은 TypeScript에서 개발자가 특정 변수나 객체가 특정 타입이라고 "주장"하는 방법이다. 이것은 컴파일러에게 "나는 이 변수의 타입을 알고 있으며, 이것은 안전하다"라는 것을 알려주는 방식이다.
- 장점: 코드가 간결하며, TypeScript의 타입 추론을 우회할 수 있다.
- 단점: 잘못된 주장을 할 경우, 런타임 에러가 발생할 수 있다. 개발자의 주장이 항상 정확하다는 보장이 없다.
const content = isUsingGroupList
? (item as IGroup).group
: (item as ITab).content;
코드 설명: 이 예제 코드는 삼항 연산자를 사용한다. isUsingGroupList가 true일 경우 (item as IGroup).group를 실행하고, false일 경우 (item as ITab).content를 실행한다.
기본적으로, as 키워드는 Type Assertion을 나타낸다. 여기서는 item을 IGroup 또는 ITab 중 하나로 간주한다. 이렇게 함으로써 TypeScript 컴파일러에게 해당 변수의 타입이 확정적이라고 알려주는 역할을 한다.
그런데, 런타임에서 item이 실제로 해당 타입이 아니라면 에러가 발생한다. Type Assertion은 개발자가 타입을 확실히 알고 있다는 것을 의미하므로, 컴파일러가 타입 검사를 스킵하게 된다.
어느 것을 사용하는 것이 더 좋을까?
Type Assertion(타입 단언): 타입을 확실히 알고 있으며, 해당 주장이 100% 안전할 때 사용해야 한다. 이는 런타임에서의 오류를 발생시킬 가능성이 있으므로 주의가 필요하다. 간단히 말해, 개발자가 컴퓨터만큼이나 정확하다고 판단될 때 적용하는 방법이다.
Type Guard(타입 가드): 코드의 안정성을 최우선으로 생각한다면 타입 가드를 사용하는 것이 바람직하다. 특히, 외부에서 들어오는 데이터나 라이브러리와 같이 타입이 확실하지 않은 경우에는 이 방법을 사용하는 것이 좋다.
결론적으로, 안정성과 간결성 사이에서의 균형을 잘 선택해야 한다. 가능한한 타입 가드를 사용하여 코드의 안정성을 높이는 것이 좋다.
