[TIL] 리액트에 타입스크립트 더하기

runningwater·2019년 12월 15일
0

TIL

목록 보기
7/7

타입스크립트는 무엇이고 왜 써야하는가?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

공식홈페이지에 나와있는 설명만큼 좋은게 있을까 ?
타입스크립트는 자바스크립트의 수퍼셋이다.

간단히 말하자면 자바스크립트를 포함하며, 자바스크립트보다 엄격한 문법(타입)을 가지고 있지만 자바스크립트로 번역되어 보여진다고 할 수 있다.

왜 타입을 추가하는게 좋을까? 나는 왜 배울려고 했을까?

이 질문에 대한 답은 에러를 줄이기 위해서라고 답하고 싶다.

라는 아주 쉬운 함수가 있다고 생각해보자.

라고 함수를 실행했을 때 자바스크립트는 어떻게 대답하는가 ?
NaN이다. 숫자가 아닌 undefined 끼리 더했으니 숫자가 아니라고 답할수밖에..
이런 경우의 대부분을 함수가 실행될때에 발견한다면 아주 큰 리스크를 가지고 코드를 실행하는 것이라고 생각한다. 그래서 실행되기 전에 해당 코드에 a라는 매개변수와 b라는 매개변수는 숫자인데 값이 누락되어있어. 채워줘라고 말해준다면 큰 리스크들을 줄여나갈 수 있지 않을까? 타입스크립트는 해당 고민을 완벽하게(때론 귀찮게) 해줄 친구다.

타입스크립트 기본

기본적으로 타입이 무엇인 지 알려주면 된다.

위와 같은 형태로 알려주는 것이다. a에 숫자나 문자열이 아닌 무언가가 들어가게 되면 타입스크립트는 경고를 날려줄것이다.

a가 숫자도 될 수 있다면 |를 통해서 알려주면 된다.

함수를 정의할 땐 매개변수들에 타입을 지정해주고, 매개 변수의 괄호 옆에 함수 리턴값의 타입을 적어주면 된다.

이제는 리액트에 적용해보자.

타입스크립트 리액트 프로젝트

해당 형태의 명령어는 my-app이라는 리액트 + 타입스크립트 프로젝트를 만들어준다.

jsx -> tsx 파일로, js -> ts 파일로 변경되어 있는 것을 확인할 수 있다.

함수와 클래스, state와 props

리액트의 특징이라면 함수형 컴포넌트와 클래스 컴포넌트가 있다는 점과 state, props를 통해서 데이터를 사용한다는 것을 들 수 있다. 각각 어떻게 타입을 지정할 수 있는 지 확인해보자.

첫번째 중괄호는 props의 타입을, 두번째 중괄호는 state의 타입을 나타낸다. 직접입력해도 되지만 interface를 이용해서 입력해보자

interface는 미리 정의되어있지 않은 변수의 타입을 지정한 집합이라고 할 수 있다.

state안에 num의 타입은 숫자다. 그래서 숫자가 아닌 값이 들어가면 경고를 띄워줄 것이다. props도 정의되어 있다면 첫번째 {}에 넣어주면 된다.

함수형 컴포넌트는 state를 가지고 있지 않다. 그래서 저런 구분 없이 prop를 전달해주면 된다.

중요한건 함수형 컴포넌트 자체도 타입설정을 해줘야한다는 것이이다.
React.FC나 React.FunctionComponent으로 지정해주면 된다.

가장 특징적인 부분만을 한번 적어봤지만, 좀 더 공부를 해서 더 자세히 글을 남기고 싶다.

profile
프로그래밍을 여행하는 히치하이커

0개의 댓글