😀 동기와 비동기
❤️ 동기
: 작업(task)들이 순차적으로 이루어지는 것 (ex) A 종료 -> B 시작)
-> 다른 작업들을 blocking
-> 코드가 짜여진 순서대로 실행 (직관적)
❤️ 비동기
: 작업들이 순차적으로 이루어지지 않음 (ex) A -> B 순서의 작업이 있다면 A를 종료하기 전에 B를 실행할 수 있다.)
-> 다른 작업들을 non-blocking
-> Ajax(Asynchronous Javascript and XML): Javascript를 사용한 비동기 통신 방식
-> HTTP 요청(GET, POST ...), 이벤트 핸들러(click, over ...), setTimeout, setInterval
😀 java script에서의 비동기
자바스크립트는 위에서부터 한줄씩 읽어내려오는 동기적 방식이지만, 요즘 사용자들은 느리고 응답이 없는 웹 사이트를 원하지 않는다.
REST-API에서 데이터의 요청과 응답을 위해 axios를 사용하여 비동기통신을 사용한다. 요청과 결과가 순서대로 발생하지 않기 때문에 결과가 발생할 때까지 요청에 대한 처리를 주시해야 한다.
아래는 동기 방식인 js에서 비동기(응답 기다리며 다른 일 할 수 있도록. 요청 끝나면 그 결과 다시 처리해줌)를 처리하기 위한 3가지 방식이다.
❤️ Callback
: 비동기 통신을 할 수 있는 한 패턴
-> 콜백 함수란 다른 함수의 인자로써 이용될때나 어떤 이벤트에 의해 호출되어질때 사용하는 함수
<특징>
- 가독성 hell
❤️ Promise
: ES6에서 나온 비동기 패턴으로 비동기 통신 결과와 상태를 저장하는 객체
-> 동기적으로 보이는 비동기 처리 방식
-> 후속처리 메서드: then(성공), catch(에러), finally(무조건)
❤️ async/await
: Promise의 복잡성으로 인해 ES8에서 나온 비동기 패턴
: async/await 은 Promise를 더욱 쉽게 사용할 수 있도록 해 주는 문법
-> Promise를 기반으로 하며, 완전히 같지는 않으나 사용하기 편함
-> 비동기 실행 방식에서 동기 실행 방식으로 변경해주기 위해서는 async/await이 필요
-> 함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise 앞 부분에 await 키워드를 사용
-> Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있다.
--> java script에서의 비동기 통신의 핵심은 Promise를 이해하는 것이다.
😀 promise 자세히 살펴보기
❤️ promise 객체
: 서버에서 받아온 데이터를 화면에 표시하기 위하여 사용하며, 데이터를 받아오기 전에 화면에 표시하려고 하면 오류가 나는데, 이를 해결하기 위한 방법 중 하나
❤️ 구성 요소
1. 상태
-
Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
-> new Promise() 메서드를 호출하면 대기 상태 -
Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
-> 콜백 함수의 인자 resolve를 실행하면 이행(Fulfilled) 상태가 됨
-> 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다 -
Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태
-> new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했다. 여기서 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 된다
-> 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다
2. 결과
3. 후속 메서드
😀 React 비동기 처리
: React에서 그나마 편하게 하기 위해 제공하는 훅/
API를 호출할 때 자주 사용한다. async, await 사용을 적극 추천
useState와 useEffect
❤️ useState
: 변수의 상태 추적
-> currentUser라는 변수를 useState로 관리한다는 뜻이고 useState가 제공하는 핵심 기능은 추적의 기능을 사용할 수 있어 currentUser라는 변수의 내용이 변하면 자동으로 jsx가 재 렌더링 되어 변화된 변수가 화면에 반영
❤️ useEffect
: 변수의 상태를 추적해 뭔가를 하게 해줌
-> 변수를 추적해 변화가 생기면 어떠한 기능을 수행할 수 있게 해 준다.
-> 두번째 매개변수에 추적할 변수를 지정해줘야 한다. 그 변수가 변하면 이 훅 안의 내용들이 실행되는 것!
---> useState와 useEffect에 대해서는 다르 포스팅으로 조금 더 자세히 살펴보도록 하겠다.
⭕ 나의 언어로 정리
: 자바스크립트는 동기 언어이다. 하지만 요즘 사람들은 빠르게 반응하는 서비스를 원한다. 따라서 자바스크립트를 비동기적으로 처리하는 방식이 존재한다. 동기적은 코드 순서대로 실행하며 하나의 작업이 끝난다면 다음 작업을 수행하는 것을 말한다. 비동기는 작업의 순서가 있더라도, 요청의 결과가 반환될 때까지 기다리지 않고, 병렬적으로 다른 작업을 수행하는 것이다. 자바스크립트에서의 비동기 요청 처리를 AJAX라고 한다. 콜백함수, PROMISE, ASYNC/AWAIT 방식이 있다. PROMISE를 잘 이해하면 된다. 총 3가지의 상태를 가지고 있다. 펜딩, 풀필, 리젝트. 풀필 되면 그 결과값을 THEN 메서드를 통해 받아올 수 있다. 에러가 나면 그 값은 CATCH를 통해 가지고 올 수 있다. ASYNC/AWAIT는 조금 더 그것을 간편하게 쓰기 위한 것이다. 자바스크립트에서는 API 통신, 이벤트 핸들러 등에 대해서는 비동기적으로 수행한다. 리액트에서 이러한 비동기를 쉽게 처리하기 위한 2가지 훅이 존재한다.
첫 번째는 useState이다. 이는 상태를 관리해주는 훅으로, 변수의 상태가 변화하면 재 렌더링 된다. useEffect는 추적할 변수를 지정해주고, 그 변수에 변화가 발생하면 실행할 기능들을 정의해주고 있다.
