TC - 9번일지

17. async await

이전 포스팅에서 useEffect() 훅 안에서 async/await를 사용했었다.
async await에 대해 간단히 설명하고 넘어가겠다. 이전에 동기 비동기 관련한 내용을 작성한 적이 있는데 그것과 동일하다.

- 동기(Synchronous)는 요청한 작업이 완료될 때까지 기다리는 방식

- 비동기(Asynchronous)는 요청한 작업이 완료되기 전에 다른 작업을 수행할 수 있는 방식.

보통 프로그래밍에선 동기방식으로 프로그래밍을 하고, 비동기는 특수한 경우에만 쓴댔지? 왜냐면 알아먹기 힘드니까. 인간이 알아먹기 힘들고, 디버깅도 힘들고 해서 데이터를 가져오는 경우 같이 시간이 오래 걸리는 과정들에만 비동기 방식으로 쓴다고 했다.
그럴 떄 쓰는 방법이 async/await 인거다.

17.0. callback 함수

콜백함수랑 또 헷갈리지말자 . 기억하자. 콜백 함수는 일반적으로 비동기적인 상황에서 많이 사용된다. 비동기적인 상황에서 작업을 처리하기 위해 우리는 보통 비동기 함수를 호출하게 된다. 비동기 함수는 작업을 백그라운드에서 처리하고, 작업이 완료되면 콜백 함수를 호출한다.

이때, 콜백 함수는 해당 작업이 완료된 이후에 실행되는 함수이기 때문에, 콜백 함수를 사용하면 비동기 함수의 작업이 끝난 후에 처리해야 하는 작업을 쉽게 구현할 수 있다.

예를 들어, AJAX 요청을 보내는 함수에서는 비동기적인 처리가 필요하다. AJAX 요청이 완료되면 서버에서 데이터를 받아와야 하는데, 이때 받아온 데이터를 처리해야 할 경우 콜백 함수를 사용하여 데이터 처리 작업을 구현할 수 있다.

따라서, 콜백 함수와 동기/비동기의 관계는 일반적으로 비동기적인 상황에서 많이 사용되는 방식이라고 할 수 있다.


그러니까 즉, 동기는 순서대로 비동기는 병렬처럼 동시에 진행.
그리고 콜백함수는 무조건 해당작업이 끝난 다음에 실행하므로, 데이터를 가져오는 작업을 진행하는 비동기 작업이 끝난 다음에 바로 즉시 특정동작을 수행하는것이 합리적인 선택이므로 대게 같이 쓰인다. 라고 기억하자.

17.1. async/await 설명

그래서 원점으로 돌아와서 다시 설명하자면,
async/await를 사용하는 것은 비동기 작업을 수행하고 해당 작업이 완료되기를 기다리는 데 사용된다.

일반적으로 useEffect()는 컴포넌트가 렌더링 될 때마다 실행되기 때문에, 이러한 비동기 작업을 수행할 때 async/await를 사용하면 더욱 쉽고 간편하게 코드를 작성할 수 있다. 이렇게 하면 비동기 작업이 완료될 때까지 useEffect()를 차단하고, 작업이 완료되면 다시 렌더링을 트리거한다.

예를 들어, useEffect() 훅 안에서 비동기로 데이터를 가져와서 상태를 업데이트하거나, 다른 비동기 작업을 수행하고자 할 때 async/await를 사용할 수 있다. 다음은 예시.

✍ 예시 코드

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos');
      const json = await response.json();
      setData(json);
    }
    fetchData();
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default MyComponent;

17.2. ✍ useEffect() 두번째 인자.

• 두번째 인자에 빈배열 : 해당 컴포넌트가 마운트 되었을 때에만 실행, 이후 실행 안됨.

• 두번째 인자 생략 : 해당 컴포넌트가 렌더링 될 때마다

이전 포스팅에서 보았듯이, useEffect의 첫번째 인자인 함수는 두번쨰 인자인 배열의 값에 따라서 결정된다.

정확히 말하면 , 두번째 인자로 빈 배열을 넣는 것과 생략하는 것은 다른 동작을 한다.

두번째 인자로 빈 배열 []을 넣으면, 해당 컴포넌트가 마운트 되었을 때 한 번만 useEffect의 콜백 함수가 실행된다. 그리고 이후에는 컴포넌트가 언마운트 될 때까지 useEffect의 콜백 함수가 다시 호출되지 않는다. 즉, 해당 컴포넌트가 처음 마운트 될 때 한 번만 실행되고, 그 이후에는 실행되지 않는다.

반면에, 두번째 인자를 생략하면, 해당 컴포넌트가 렌더링 될 때마다 useEffect의 콜백 함수가 실행된다. 렌더링이 될 때마다 콜백 함수가 실행되기 때문에, useEffect에서 수행하는 작업이 많을 경우 성능에 영향을 미칠 수 있다. 따라서, 두번째 인자를 명시적으로 넣어줌으로써, 컴포넌트의 렌더링과 무관한 작업을 한번만 실행하도록 최적화할 수 있다.

17.3. 마운트

cf. 마운트

마운트(Mount)란, React 컴포넌트가 DOM 상에 나타나는 것을 의미한다. 즉, React 컴포넌트가 처음으로 렌더링되어 DOM 상에 나타날 때를 말한다. 이때 useEffect() 훅을 사용하면 컴포넌트가 마운트될 때 또는 언마운트될 때 등의 라이프사이클 이벤트를 처리할 수 있다.

예를 들어, useEffect() 훅을 사용하여 API를 호출하고, 그 결과를 상태로 업데이트하고 싶은 경우, useEffect()의 두번째 인자로 빈 배열([])을 전달하여 컴포넌트가 마운트될 때 한 번만 실행되도록 설정할 수 있다. 이렇게 하면, 컴포넌트가 처음으로 렌더링될 때만 API를 호출하고, 다시 렌더링될 때는 호출하지 않게 된다.