[JavaScript]비동기 작업 수행하는 코드 뜯기

아래 코드는 unbookClub 프로젝트를 진행하면서  API 도서검색 기능구현을 하며 사용한 코드다.

 

onClick 함수로 아래의 아래의 코드와 연결시켰다.

 

 

기능 목록

 

event.preventDeafault(); => 새로고침 방지

setSearchError(null); => 검색 오류를 나타내는 상태 변수를 초기화.(useState 리액트 내장함수 사용)

 

startLoading(); => customHook(contextAPI와 함께 사용함) 으로써 로딩 이미지를 보여주는 커스텀훅 호출

 

async { ... } await(error) { ... } => async 키워드는 함수를 비동기 함수로 선언.

 

이는 함수 내에서 await 키워드를 사용할 수 있게 하고, 함수가 항상 Promise를 반환.

 

async 함수 안에서 await 키워드를 사용하면 해당 표현식의 비동기 작업이 완료될 때까지 함수의 실행을 일시 중단한다.

 

 

함수의 실행을 일시 중단

 

조건문 바깥부터 해석 

if (params.query) { ... } else { ... } =>검색에 필요한 파라미터를 설정하는 함수

 

try { ... } catch (error) { ... } => JavaScript에서 예외처리를 위해 사용되는 키워드 (finally)도 추가될수 있다. 

 

try : kakaoSearch(params);를 호출하여 검색을 시도하고,

성공 시 검색 결과를 data로 받아옴. 예외가 발생하면 catch 블록으로 이동하여 에러를 처리.

해당 데이터는  searchResults라는 변수로 저장됨. 

이는 나중에 UI에서 검색 결과를 표시하는 데 사용됨.

*finally 블록을 추가 할 수 있다 (예외처리에 관계없이 실행되는 코드)*

 

stopLoading(); => 로딩 상태를 종료하는 커스텀 훅을 호출

 

---

 

비동기 호출 관련 도움많이 된 블로그 글!

 

 

 

https://velog.io/@ahsy92/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%98%B8%EC%B6%9C-callback-promise-asyncawait%EC%9D%98-%ED%8A%B9%EC%A7%95%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90

[기술면접] 비동기 호출 callback, promise, async/await의 특징과 차이점

 

https://velog.io/@cyranocoding/2019-08-02-1808-%EC%9E%91%EC%84%B1%EB%90%A8-5hjytwqpqj

JavaScript 비동기 처리를 위한 promise 이해하기