React에 Typescript라는 양념을 뿌려보도록 하자🧂
앞으로 알아보게 될 것
- Typescript 정확히 무엇이고, 왜 필요할까?
- Typescript의 핵심 내용
- Typescript와 React를 함께 사용하는 법
오늘은 첫번 째 주제에 대해 알아보려 한다😀
Typescript란 무엇이고, 왜 필요할까?
Typescript, 즉 TS는 javascript(JS)의 슈퍼셋(Superset) 언어이다. JS를 기반으로 하되 좀 더 확장된 문법을 가진 프로그래밍 언어라는 뜻이다.
JS의 기본적인 문법과 코드 작성법(if문, for문, 객체 사용법 등)을 그대로 사용함과 더불어 몇 가지 기능이 추가된 언어라고 보면 되겠다.
TS의 특징 중 가장 중요한건 정적 타입(Statically Typed)이라는 점이다.
'Typescript'라는 이름도 여기에서 유래되었다고 한다.
그렇다면 정적 타입 기능은 무엇이고 왜 필요한 것일까?
이 부분을 JS와 비교해 보도록 하자. JS는 동적 타입(dynamically typed) 언어이다.
..동적 타입 언어는 또 무엇이길래..?
예제와 함께 이해해보도록 하자.
동적 타입(dynamically typed) 언어 예제
Html 파일이다. 딱히 콘텐츠는 없고, JS파일만 가져오고 있다.
Html 파일에서 사용하고 있는 JS파일이다. Add 함수를 정의하여 콘솔로 확인하도록 하는 내용을 담고 있다.
예제와 함께 알아야 할 것은 JS의 자료형(type)이란 개념이다.
위 add 함수로 전달한 두 개의 값(2, 5)은 숫자(number)형 type이다. JS도 이 값이 number라는 것을 알고 있기에 콘솔로 7이라는 값을 확인할 수 있다.
여기서 JS는 동적 언어라는 점을 다시 상기시키고 다시 코드를 들여다보자.
Add 함수 선언 시점에서는 딱히 type을 특정 짓지 않고 있다. 그저 두 개의 매개변수를 받는다는 것만 알수 있다.
Type이 고정되어 있지 않고, 이 add 함수에서 사용할 type을 미리 정해두지도 않았기에 모든 type의 매개변수를 받을 수 있다.
return값을 미루어보아 매개변수가 number가 되야 해당 함수가 정상 작동할 것이라 예상할 수 있다.
하지만 웬걸
위와 같이 매개변수를 string으로 바꾸어도 아주 잘 작동 한다. 값은 25가 나왔다.
+가 두 매개변수를 더하는 연산(2+5)을 수행하는 대신, 두 문자열을 연결하는 동작(2에 5 붙이기)을 수행했다.
이렇듯 변수에 저장되는 값의 type이 언제든 바뀔 수 있는 언어를 동적 타입(dynamically typed) 언어라고 부른다.
이게 왜 문제가 될 수 있을까?
대규모 프로젝트와 같이 소스 파일이 많고, 여러 사람이 동일한 코드 베이스에서 작업하는 환경이라면 함수나 객체가 의도치 않은 방식으로 쓰이게 될 위험이 있다.
모든걸(?) 받아들여주는 JS는 우리에게 아무 것도 경고해주지 않기 때문이다..
코드를 실행하고 나서야 무언가 잘못되었음을 알 수 있다.
그렇기에 코드 보완과 오류 방지를 위해 정적 타입 기능이 필요하다 할 수 있겠다.
다시말해, 이것이 바로 정적 타입(Statically Typed)인 TS가 필요한 이유이다.
별다른 type 지정이 없었던 JS와 달리 TS에서는 변수에 들어갈 값의 형태에 따라 type을 지정해 주도록 한다.
TS를 적용해보자
TS가 설치되어 있다는 가정하에 아래와 같이 코드를 바꿔준다.
매개변수 뒤에 콜론(:)과 함께 해당 매개변수에 사용할 type을 표기(Type Annotation)을 해주도록 한다. Type을 number라고 명시해주니 TS의 궁시렁거림을 볼 수 있다.
'add 함수에는 string을 넘겨줄 수 없어! number를 줘!!!'
string을 다시 number로 잘 바꿔주도록 한다.
물론 매개변수 외에도 다양한 곳에 type 표기가 가능하다.
우리는 이러한 type 표기를 통해 코드 실행 없이도 사전에 에러, 의도치 않은 함수 사용 등을 잡아낼 수 있다. TS의 도움으로 조금 더 나은 코드 작성을 할 수 있게 되는 것이다🎊
