동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉 로직이 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 예를 들어 서버에서 데이터를 가져와 화면에 표시하는 작업을 수행할 때 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다. 아래는 동기식으로 동작하는 코드의 예시. 순차적으로 실행된다.function func1() { console.log('func1'); func2();}function func2() { console.log('func2'); func3();}function func3() { console.log('func3');}func1(..

실무에서 setState를 비동기적으로 활용하기 해당 예시는 tick() 이라는 초당 업데이트 함수를 정의하여 랜더링 이후 즉시 호출되는 함수인 componentDidMount()를 사용해 랜더링 될 때마다 시간을 업데이트 하는 로직이다. 예시 소스에 앞서 setState는 비동기 함수라는 것과, 실제 랜더링이 이루어지는 render() 함수와 생성자, 그리고 현재 클래스를 종료 시키는 componentWillUnmount() 함수 에서는 setState() 함수를 실행할 수 없다는 것을 알고 있어야 한다. 예시 소스 import React from "react"; class Timer extends React.Component { constructor(props) { super(props) this.s..

동기와 비동기를 나누는 가장 큰 차이는 어떻게 실행 순서를 가지느냐에 있다. 아래 이미지와 같이 동기(Synchronous)는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을, 비동기( Asynchronous)는 요청을 보낸 후 응답과 관계 없이 다음 동작을 실행할 수 있는 방식을 의미한다. 아래와 같이 일반적으로 함수를 작성하여 호출하면 동기적으로 실행된다.function work() { const start = Date.now(); for (let i = 0; i 위 결과와 같이 함수 로직이 끝난 후에야 '다음 작업'이라는 문구가 호출되는 것을 볼 수 있다. 그리고 이를 비동기적으로 전환하려고 한다면 setTimeout을 사용하여 아래와 같이 변경할 수 있다.func..