동기(Synchronous), 비동기(Asynchronous)

동기(Synchronous)와 비동기(Asynchronous)의 차이

1. 동기(Synchronous)

• 개념: 요청을 보낸 후 응답을 받을 때까지 기다리는 방식
• 특징: 한 작업이 끝나야 다음 작업을 수행할 수 있음
• 장점:
  • 코드의 실행 순서가 직관적이며 이해하기 쉬움
  • 디버깅이 비교적 쉬움
• 단점:
  • 하나의 작업이 오래 걸리면 전체 프로그램이 멈출 수 있음
  • 병렬 처리가 어려움

✅ 동기 코드 예제 (JavaScript)

function taskA() {
  console.log("작업 A 시작");
  for (let i = 0; i < 1e9; i++) {} // CPU를 많이 사용하는 연산
  console.log("작업 A 완료");
}

function taskB() {
  console.log("작업 B 실행");
}

taskA();
taskB();  // taskA가 끝난 후 실행됨

실행 결과

작업 A 시작
(몇 초 후)
작업 A 완료
작업 B 실행

작업 A가 끝날 때까지 작업 B는 실행되지 않음.

---

2. 비동기(Asynchronous)

• 개념: 요청을 보낸 후 응답을 기다리지 않고 다음 작업을 진행하는 방식
• 특징: 시간이 걸리는 작업(예: 네트워크 요청, 파일 읽기 등)이 실행되는 동안 다른 작업이 동시에 실행될 수 있음
• 장점:
  • 오래 걸리는 작업이 있어도 프로그램이 멈추지 않고 실행됨
  • CPU와 I/O 작업을 효율적으로 사용할 수 있음
• 단점:
  • 코드가 복잡해질 수 있음 (콜백 지옥, Promise, async/await 필요)
  • 디버깅이 어렵고 흐름을 파악하기 어려움

✅ 비동기 코드 예제 (JavaScript - setTimeout)

function taskA() {
  console.log("작업 A 시작");
  setTimeout(() => {
    console.log("작업 A 완료");
  }, 3000); // 3초 후 실행
}

function taskB() {
  console.log("작업 B 실행");
}

taskA();
taskB();  // taskA가 끝나기 전에 실행됨

실행 결과

작업 A 시작
작업 B 실행
(3초 후)
작업 A 완료

설명:

• setTimeout()이 비동기 함수이므로 taskA() 실행 중에도 taskB()가 바로 실행됨.
• 3초 후에 작업 A 완료가 출력됨.

---

동기와 비동기의 차이점

구분 동기(Synchronous) 비동기(Asynchronous)

실행 방식	요청을 보내면 응답을 받을 때까지 대기	요청을 보내고 다른 작업을 진행
코드 흐름	순차적	병렬 처리 가능
응답 속도	하나의 작업이 끝나야 다음 작업 진행	여러 작업을 동시에 진행 가능
활용 예시	for문, 기본적인 연산	네트워크 요청, 파일 읽기, 타이머

---

React 활용 예시

동기 코드 (useEffect 내부 실행)

useEffect(() => {
  console.log("데이터 로딩 시작");
  const data = fetchDataSync(); // 동기적인 데이터 호출
  console.log("데이터 로딩 완료:", data);
}, []);

이렇게 동기적으로 처리하면 fetchDataSync()가 오래 걸릴 경우 UI가 멈출 수 있음.

비동기 코드 (useEffect + async/await)

useEffect(() => {
  async function loadData() {
    console.log("데이터 로딩 시작");
    const data = await fetchDataAsync(); // 비동기 데이터 호출
    console.log("데이터 로딩 완료:", data);
  }
  
  loadData();
}, []);

비동기로 처리하면 UI가 멈추지 않고 데이터 로딩이 진행됨.

---

그럼 왜 비동기 처리를 해야할까?

• 네트워크 요청과 같은 시간이 걸리는 작업을 동기적으로 처리하면 그동안 다른 작업이 계속 진행되지 못하니 비동기 처리를 하여 다른 작업들(ex. UI가 그려지는 것 등)이 계속 진행될 수 있도록 하여 앱 성능과 사용자 경험을 개선한다.

---

결론

• 빠르게 실행되는 작업(연산, 단순 로직)은 동기 처리
• 네트워크 요청, 파일 읽기, 타이머 같은 작업은 비동기 처리
• 비동기 처리(async/await)를 적극 활용하여 UI가 멈추지 않도록 구현