동기 vs 비동기 생각보다 딥한 내용이었다.
동기
동기는 순서가 정해진 처리 방식이다. 코드가 위에서 아래로 실행되는 것처럼
진행되는 순서가 있고 앞의 순서가 처리되기 전까지 다음 순서는 기다리게 된다.
비동기
비동기는 순서가 정해지지 않은 처리방식, 동기와는 반대로 실행순서가 정해지지 않았다. 동시에 처리가 진행되며 끝나는 것도 제 각각 다르다
비동기 처리란 ?
비동기식 처리를 동기식으로 처리하는 방법을 나타낸다.
하나의 이벤트를 처리하는데 만일 비동기식으로 처리하게 되면 먼저 실행순서가 제 각각이 되어 버린다. 빨리 끝나는 것은 빨리 끝나는대로, 늦게 끝나는 것은 늦게 끝나는 대로 문제가 발생한다.
예시
한 예시로 fetch에 대한 예시가 많이 주어진다.
fetch.. 프로젝트에서 많이 사용하였었는데 당시 비동기 처리에 대해서 모르고 그냥 기능적으로만 사용하였다. 내가 겪은 예시로는 아래와 같았다.
fetch는 백서버의 데이터를 받아오는 역할을 하였는데 map함수를 사용하여 렌더링을 할때 문제가 발생되었다. 데이터는 아직 들어오지 않았는데 없는데이터를 map으로 순환하거나 사용하려고 할때 렌더링 이슈가 발생하였다.
그래서 해결한것이 조건부 랜더링
fetch에대한 함수의 실행과 map함수의 실행과정이 동시에 실행되었기 때문에
없는 데이터로 map함수를 실행하다 보니 문제가 발생한 것이었다
이와 같이 state값으로 데이터를 넣는데 콘솔을 같이 찍게 되면 한박자 늦게 콘솔이 찍히거나 하는 것도 이의 예시가 될수 있다고 생각한다.
이에 대한 해결책으로 순서를 부여하여 하나의 처리가 끝나면 다음 함수가 처리되도록 하는것 이것이 비동기 처리이다.
동기의 단점으로는 하나의 처리가 끝나기 까지 기다리다 보면 다음함수가 실행되기 까지 시간이 오래 소요된다는 이슈가 있다고는 들었는데 로딩중 화면을 구현하거나 간략하고 깔끔한 클린 코드를 구현하면 해결될것이라고 생각된다.
비동기 함수를 동기로 만드는 방법은 세가지가 있다.
1. 콜백 함수
2. promise
3. async/await
콜백함수가 기존에 있다가 promise , async/await가 es6문법으로 등장하게 되었다.
콜백함수는 .then 으로 함수가 실행되면 사후 처리를 관리하는 것.
하지만 계속된 사후 처리는 흔히 말하는 콜백함수 지옥을 만들수 있다.
.then .then .then ...
그래서 등장한 promise 와 async/await
async/await가 더욱 깔끔하고 간결한 코드로 만들수 있다.
오늘은 동기 비동기, 비동기처리 에 대해서 알아 보는 과정이므로
콜백함수, promise, async/await에 대해서는 다음 장에서 더 알아본다.
