Promise 타입 명시와 비동기 작업

1. Promise 타입?

넥스트를 처음 공부 할 때 API나 받아 오는 값, 매개 변수 등의 타입 명시 부분에서 조금 헤맸었다. 내가 알고 있던 Promise는 그냥 비동기를 위한 객체인 줄 알았는데, 강의에서도 친구가 알려주는 방법에서도 값을 받아 올 때 타입 명시가 Promise로 명시되길래 일단 적어보면서도 이해가 가지 않았다.

 

사실 Promise 자체에 그렇게 깊게 알고 있기 보다는 async await 정도나 try catch문을 쓰기 위해 개념 정도만 가볍게 훑고 지나갔는데, 그게 문제였던 것 같다.

 

2. 그렇다면 Type의 Promise는?

내가 헷갈렸던 부분은 정확하게 Promise와 타입으로 지정된 Promise의 차이점이었다. 처음에는 내가 알고 있는 Promise가 아니고 다른 뜻이 존재하나? 싶었는데, "핵심은 Promise는 비동기 객체"에서 있었다.

 

자바스크립트는 동기 언어

아직 API에서 값을 받아오지 못했는데 화면의 렌더링이 끝나 데이터가 없다고 뜰 때가 있다. 이럴때 react라면 useEffect로 값이 다시 받아올 수 있게 처리할 수도 있지만, 이럴 경우 API가 계속 호출 될 때가 있다. 이를 방지하려면 값을 비동기 객체로 호출하면 되는데, 이 때 알아야 하는 개념이 Promise다.

 

Promise의 경우 비동기 호출을 도와주며 콜백 지옥에서 벗어나게 해준다...  쉽게 풀어보자면, 비동기적으로 값을 받아올 때 await으로 호출한 뒤 받아오면 손쉽게 비동기적으로 값을 받아올 수 있는데, 단순하게 Type을 Promise로 지정하여 Typescript에게 내가 받아올 값이 Promise 객체 즉 비동기 객체다 라고 알려준 것 뿐인데 내가 너무 어렵게 생각한 것이다.

머쓱타드

 

3. Typescript의 본질을 잊지 말자

Typescript와 javascript의 가장 큰 차이점은 '타입'이 존재한다는 것이다. 자바스크립트의 (개인적으론) 장점이자 단점이 느슨한 규율을 가지고 있다는 것인데, 덕분에 초보자도 좀 더 빠른 결과물을 낼 수 있지만 이로 인해 나지 않아도 될 오류가 나는 문제가 발생했다. 타입스크립트는 이러한 문제를 사전에 방지하고, 또한 쓰다보면 스크립트 자체가 어떻게 구현되는지 알 수 있게 해준다. 

처음 타입스크립트를 공부할 땐 솔직히 왜 쓰나 번거롭기만 하고 프로젝트에서 계속 발목을 잡힐 때는 후회도 하곤 했지만, 하나하나 타입을 지정하고 생각하게 되면서 자바스크립트에서 당연히 되던 코드나 함수가 어떻게 돌아가는지 좀 더 심오한 고찰을 할 수 있어졌다.

 

잊지말자 Typescript는 타입을 지정하여 자바스크립트에서 날 수 있는 오류를 미연에 방지하고 좀 더 엄격한 잣대를 들이대지만, 결국 Javascript라는 것을!