[React] 동기, 비동기처리 개념 및 useEffect에서 비동기처리

동기 작업

간단하고 직관적이며 특히 순차적 작업 처리나 데이터 무결성 유지와 같은 상황에서 필요

비동기 작업

데이터 로딩, API 호출, 타이머 설정 등과 같이 시간이 걸릴 수 있는 작업을 수행하는 것을 의미
요청을 보낸 후 결과를 기다리지 않고 코드의 다음 줄이 실행됨

useEffect내에서 비동기처리

useEffect 훅 자체는 동기적(간단하고 직관적인 처리)으로 실행될 때 비동기 작업을 기다리지 않는다.
그러나, useEffect 훅 내에서 비동기 작업을 수행하는 경우 (ex. fetch, api 호출, 데이터로딩 등) 비동기 함수는 동기적 실행 흐름과 별도로 동작한다.
즉, useEffect의 동기적 흐름 내에서 비동기 함수 호출이 이루어지지만, 비동기 작업은 비동기 함수에서 처리됩니다.

1. 비동기 함수를 직접 useEffect 안에서 호출하는 경우
: 비동기 함수의 정의와 호출이 훅 안에서 이루어지기 때문에 useEffect의 사이드 이펙트로 직접 처리 가능, 전체적인 흐름이 눈에 들어옴

2. 비동기 함수를 별도로 정의 후 useEffect에서 호출하는 경우
: 비동기 함수를 다른 곳에서 재사용하거나 코드의 모듈화가 필요한 경우 편리 (재사용성이 좋다.)