자바스크립트 동기와 비동기

매우 간단하게 동기와 비동기를 적어보았다.

좀 더 자세하게 작동하는 방식을 알고 싶다면, 맨 아래 링크로 들어가는 것을 추천한다.

 

 

 

JavaScript는 동기식 언어이다

 

한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다.이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 부른다.

 

• 마치 음식점에 여러 사람들과 갔을 때, 키오스크를 이용하여 한 사람씩 결제하는 것과 유사하다.
• 자바스크립트는 한 번에 하나의 작업을 수행한다.

 

 

그렇다면 비동기는 무엇일까?

 

하지만 비동기는 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.

 

 

 

동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있다.

비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.

 

 

 

대표적으로 Ajax가 비동기처리 이유

Ajax라는 네트워크 통신 기술로 이제 클라이언트가 서버에 데이터를 요청해서 받아오는 것이다.

그래서 Ajax는 항상 코드의 최상단에 위치해있다.만약 데이터의 수가 많다면, 그것을 처리하는 시간동안 기다리고 있어야 한다.

 

• 하지만 이것을 비동기식으로 처리한다면, 데이터를 요청하고 받아오는 시간동안 다른 코드들을 실행할 수 있다.
• 아까 말했듯이, 자바스크립트가 싱글 스레드이므로 데이터를 다 받아야 다음 코드가 실행이 되는데 그렇다면 데이터를 받기 전까지는 사실상 프로그램이 멈춰있는 것이다.
• Ajax라는 네트워크 통신 기술로 이제 클라이언트가 서버에 데이터를 요청해서 받아오는 것이다.

 

 

하지만, 나는 코드를 차례대로 실행하고 싶다

 

 

비동기식을 처리하는 방법에는 콜백함수가 있다.

 

여러 함수들을 선언하고, 어느 한 함수가 실행될 때, 상황에 따라 필요한 다른 함수를 실행하고 싶을 때 활용할 수 있다.

 

 

아래는 콜백함수의 대표적 예시이다.

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}
 
function say_hello (name) {
    console.log("안녕하세요 제 이름은 " + name + "입니다");
}
 
function say_bye (name) {
    console.log("지금까지 " + name + "이었습니다. 안녕히계세요");
}
 
introduce("홍", "길동", say_hello);
// 결과 -> 안녕하세요 제 이름은 홍길동입니다
 
introduce("홍", "길동", say_bye);
// 결과 -> 지금까지 홍길동이었습니다. 안녕히계세요

 

콜백함수에 대해서는 아직 완벽히 이해를 하지 못해서, 따로 자세하게 글을 쓸 예정이다.

 

---

 

리액트로 로컬스트리지를 연결하다가 알게 된 사실인데, state에 저장된 상태값은 처음 렌더링이 시작하기 전에 비동기로 동작하기 때문에, 초기값이 null이면 렌더링이 안된다.

 

따라서, state의 초기값을 비워두고 싶을 때에는, 빈 배열이나 null 등으로 미리 표현해주는 것으로 오류를 방지할 수 있다.

 

 

 

아래 링크를 통해서, 자바스크립트에서 비동기가 작동되는 방식을 좀 더 자세하게 알아보자.