리액트 타입스크립트 실무 적용 후기, 써야 하는 이유

회사의 새로운 프로젝트에 리액트와 타입스크립트를 쓰게 됐다.

얼추 큰 규모의 프로젝트에 타입스크립트를 써야 한다는 정도로만 알고 있었는데

input과 변수가 유독 많은 페이지를 구현하다보니 왜 필요한지 깨닫게 됐다.

이를 토대로 굳이 타입스크립트를 쓸 필요가 있는지 의아하게 생각할 수 있는

타입스크립트 뉴비나 개발 입문자들을 위해서 끄적여 볼까한다.

 

자바스크립트의 타입 부재로 인한 문제점

자바스크립트의 변수에는 어떠한 것도 다 들어간다.

한 변수에 숫자나 문자를 넣고 난 뒤 원시형태의 값이 아닌 객체도 넣을 수 있다.

 

이는 경우에 따라서 심각한 문제가 된다.

처음에 문자를 넣었던 변수가 계속 문자인지를 보장할 수 없다.

 

문자를 넣었던 변수가 수백개의 코드 라인을 돌고 돌아 이제 화면에 출력되기 직전이라고 해보자.

만약 중간에 실수로 변수에 null을 넣었다면 화면에 null이 그대로 출력된다.

그러나 타입스크립트를 이용해서 타입이라는 방어막을 치면 개발과정에서 null이 다른 타입이라는 것을 미리 알려준다.

 

변수가 많이 필요 없는 단순한 앱이라면 타입스크립트의 도움 없이도 위와 같은 문제를 막을 수 있겠지만

변수가 수십개를 넘어가고 여러 함수의 파라미터를 통과해야하는 규모의 앱이라면 쉽지 않다.

 

타입스크립트가 필요한 예

리액트 앱을 예로 들어보자.

api 서버에서 json 데이터를 받았다.

받은 객체에는 20개가 넘는 property가 들어 있고 변수의 타입도 다양하다.

 

const data = {
  name: '김코딩',
  key1: 5,
  key2: true,
  key3: null,
  
  /* ... */
  
  key30: [1, 2, 3, 4],
}

 

이 변수들 중 일부는 state에 들어간다.

타입을 인위적으로 바꾸는 경우도 생긴다.

 

setState({
  name: data.name,
  value1: data.key1,
  
  /* ... */
  
  value30: data.key30.toString(),
})

 

state에 저장해 뒀던 데이터를 다시 서버에 보내야 한다.

이중 value1이라는 변수에 숫자가 아닌 boolean 값을 넣어서 보내면 400 에러가 발생한다고 해보자.

서버에 보내려는 value1 변수에 값이 들어오기까지 너무나 많은 프로세스들을 거쳐 어떤 타입인지 한눈에 들어오지 않는다.

value1 뿐이랴, 나머지 변수들도 확인이 필요하다.

이렇게 확인할 값이 많아지면 사람은 실수 할 수밖에 없다.

 

타입스크립트를 쓰면 각 값은 type이라는 울타리 안에서만 움직인다.

처음 타입을 지정해준 변수에서 파생되는 변수의 타입도 추론해서 타입에서 벗어나지 않게 한다.

toString 메소드 등을 이용해서 명시적으로 타입을 전환했다면 또 전환한 타입을 바탕으로 추론한다.

 

마치 끈으로 연결해준 것과 같다랄까.

이러한 끈 덕분에 복잡하게 많은 변수들을 틀리지 않고 잘 꿰맬 수 있는 것 같다.