동기
정의
taskA -> taskB -> taskC ..
와 같이 하나의 스레드에서 하나의 작업이 끝난 이후에 다음 작업으로 넘어가는 방식
단점
taskB가 10초 이상 걸리는 경우, 그 다음 작업인 taskC가 계속 작업이 이루어지지 못함. 이러한 문제는 전체 프로그램의 성능이 악화시킴
어떻게 해결할까?
java, c#은 멀티 스레드 방식을 이용하여 여러 개의 작업을 동시에 실행시켜 해결
스레드1: taskA ->
스레드2: taskA ->
스레드3: taskA ->
하지만, 자바스크립트 엔진은 스레드가 1개 밖에 없기 때문에 위와 같은 멀티 스레드 방식으로는 이 문제를 해결할 수 없다. 그래서 비동기 방식을 이용한다.
비동기
정의
작업을 순서대로 실행하지 않고, 다른 작업을 동시에 실행시킬 수 있음
작업이 끝난 이후의 결과값을 이용하고 싶다면 콜백 함수 사용
setTimeout
설정 시간 후에 콜백 함수가 실행되도록 하는 비동기 처리 함수
1. 타이머가 실행됨
2. 타이머가 흘러가면서, 콜백 함수 실행을 기다리지 않고 다음 작업으로 넘어감
3. 타이머가 종료되면 콜백 함수가 실행됨
어떻게 가능한가?
자바스크립트는 단일 스레드이지만 비동기 작업이 가능한 이유는, 이러한 비동기 작업들은 자바스크립트 엔진이 아닌 브라우저에서 별도로 관리하는 Web APIs에서 실행되기 때문이다.
자바스크립트 엔진이 코드를 실행시키다 비동기 작업을 만나면 Web APIs에게 그 작업을 전달하고 다음 작업을 수행하다가, 비동기 작업이 끝난 Web APIs가 다시 자바스크립트 엔진에게 콜백 함수를 넘겨주면 그 함수를 실행시키게 된다.
-> 비동기 함수 안에서 나온 결과값을 함수 외부에서 이용하고 싶다면, 콜백 함수를 이용한다.
-> 비동기 함수를 계속 겹쳐서 작성하면, 콜백 지옥이 발생할 수 있음
출처
[인프런] 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
