타입스크립트의 형변환
Typescript Type-Casting
타입스크립트는 타입이 존재하고, 이에 따라 당연히 타입 캐스팅도 존재합니다. 타입 캐스팅을 한국어로 말하면 형변환, 즉 형식을 변환하는 작업입니다.
Type Casting의 필요성
Javascript나 Lua 등, 형식을 명확히 지정하지 않아도 되는 언어를 사용하다가 Typescript나 C#, Java 등 형식을 명시해야 하는 언어를 사용하게 되면 언뜻 굳이 형변환이 필요한가? 라는 생각이 들 수도 있으나, 아주 조금만 코딩하다 보면 형변환의 필요성이 뼈저리게 느껴지게 될 겁니다.
가장 흔하고 좋은 예시는 데이터를 옮기는 상황이라 할 수 있습니다.
이 포스트에서는 타입스크립트에 대해 말하고 있으므로 타입스크립트로 예를 들겠습니다.
// 여러 형식이 담길 수 있는 변수
const variableData: string | string[] | null = "abc";
// string 데이터를 처리하는 메서드
function processString(str: string) {
console.log(str);
}
// variableData에는 현재 string 타입의 데이터가 담겨 있으나
// processString에서는 이를 처리하지 못함. 왜?
// processString은 string 형식의 인자를 가지지만
// variableData는 string | string[] | null 타입이기 때문
processString(variableData); // 컴파일 에러바로 위와 같은 상황에서 타입 캐스팅을 사용할 수 있습니다.
Typescript의 두 가지 형변환 방법
타입스크립트에는 두 가지 형변환 방법이 있습니다. 마치 C#의 Direct Casting과 as, is operator 처럼요.
그러나 각각의 캐스팅 방식이 로직에 영향을 주는 C#과는 다르게 Typescript의 두 가지 형변환은 로직에 직접적인 영향을 주지 않습니다. 즉, 동일한 기능을 합니다.
권장되지 않는 오래된 방법
// <> casting
processString(<string>variableData);
꺽쇠 괄호 안에 타입을 지정해 캐스팅하는 방법입니다. 타입스크립트 초창기부터 지원된 오래된 방법입니다. 그러나 권장되지 않습니다. 권장되지 않는 이유는 다음 캐스팅 방법을 알려드린 뒤 말씀드리겠습니다.
권장되는 방법
// as casting
processString(variableData as string);왜 as casting을 사용해야 하나?
꺽쇠 괄호를 사용하는 것과 as 키워드를 사용하여 진행한 형변환의 결과가 같다면, 왜 하나는 권장되지 않고 하나는 권장되는 것일까요?
첫 번째 답은 바로 JSX에 있습니다. React, NextJS, ... 유용한 라이브러리 및 프레임워크는 생산성 향상 등 여러 이유 때문에 JSX 파일 형식을 사용합니다. 꺽쇠 괄호를 사용해 XML처럼 사용되는 JSX의 특성 상, 타입 캐스팅을 하고자 꺽쇠 괄호를 쓰면 이를 노드로 인식해버리는 문제가 발생하게 됩니다. 이를 회피하기 위해 as casting을 사용해야 합니다.
두 번째 답은 첫 번째 답과 이어진다고 볼 수 있습니다. React, NextJS, Vue 등등 수많은 대세 라이브러리 및 프레임워크가 등장하며 타입스크립트 사용자의 절대다수가 이러한 라이브러리 또는 프레임워크를 사용하게 되었고, 이 때문에 절대다수의 커뮤니티 및 개발자가 이를 기준으로 코드를 작성하고 피드백하게 되었습니다.
필연적으로 대부분의 개발자가 as casting을 사용할 수밖에 없는 상황이 되었으며, 이는 즉 문서를 보거나 피드백을 구할 때 as casting을 기반으로 한 코드가 100%에 가까운 비율로 보이게 된다는 말입니다.
협업 상황에서는 말할 것도 없습니다. 절대다수의 개발자가 as casting을 사용할 것이며, 혼자 꺽쇠 괄호 캐스팅을 사용하려 한다면 코드 포맷 문제로 컷 당하게 될 것입니다.
즉, 미리미리 as casting을 사용하는 습관을 들이는 게 좋다는 얘기이죠.
무엇보다 보기가 깔끔합니다. 직관적이고요.
댓글
댓글 쓰기