useEffect와 async/await

집에가는길에 갑자기 카톡이왔다.
프론트분께서 useEffect와 async/await 이 같냐고 물어보셨다.
useEffect에대해 자세히는 알지 못하지만 ‘기능이 다르지않나?’라는 생각이들었다.
그래서 찾아보았다.

useEffect?

useEffect는 React 라이브러리에서 제공하는 Hook 중 하나이다.
useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
Side effect란 컴포넌트 외부에 영향을 주는 작업으로, API 호출, 이벤트 리스너 등이 해당된다.

useEffect는 컴포넌트가 렌더링될 때마다 실행되거나 특정 상태값이 변경될 때 실행되도록 설정할 수 있다.
이를 통해 컴포넌트의 생명주기와 관련된 작업을 처리하거나, 데이터 가져오기, 구독 설정, 리소스 정리 등의 작업을 수행할 수 있다.

useEffect는 Promise나 비동기 작업을 처리하는 것과 직접적으로 연관된건 아니지만, React 구성 요소에서 비동기 동작을 달성하기 위해 비동기/대기와 함께 사용할 수 있다.

async/await?

async/wait는 좀 더 동기적으로 보이는 스타일로 비동기 코드를 작성할 수 있게 해주는 JavaScript의 기능이다.

Promise를 처리하고 비동기 작업을 더 쉽게 하는데 사용된다.
async/await을 사용하면 콜백 함수나 .then(), .catch()를 사용하지않아도 동기 코드와 유사한 비동기 코드를 작성할 수 있다.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

위의 코드에서 await은 fetch()와 response.json()에 의해 Promise객체가 반환되기를 기다린다.
await으로인해 코드가 일시 중지되고 비동기 작업이 완료될 때까지 기다린 후 계속 진행할 수 있다.

3. useEffect안에 비동기 함수를 써도 되나?

학원에서는 그냥 쓰는것을 보았는데 검색해보니 주의할 점이 있다고한다.

1. usesEffect 함수는 비동기 함수를 반환하면 안된다.

useEffect의 첫 번째 인자로 전달되는 함수는 동기적으로 실행되어야한다.

즉, 해당 함수는 비동기적인 작업을 직접 수행하면 안된다.

useEffect(async () => {
  // 비동기 함수를 useEffect에 직접 반환해서는 안된다.
  const result = await fetchData();
  /
}, []);

2. Rendering loop(렌더링 루프)

비동기 함수가 useEffect에 직접 포함되면 컴포넌트의 state가 업데이트될 때마다 함수가 다시 실행된다.
이는 무한한 렌더링 루프를 초래할 수 있다.

때문에 useEffect 함수 내에서 비동기 작업을 수행할 때 추가적인 관리가 필요하다. 해당 함수를 내부에서 정의하고 호출해야 하며, 해당 비동기 작업을 관리하기 위해 적절한 state나 clean-up 로직을 구현해야 한다.

useEffect(() => {
  let isMounted = true;

  async function fetchData() {
    try {
      const response = await fetch("https://api.example.com/data");
      const data = await response.json();

      if (isMounted) {
        // isMounted가 true일 때 상태 업데이트
        setData(data);
      }
    } catch (error) {
      console.error("Error:", error);
    }
  }

  fetchData();

  return () => {
    isMounted = false; //clean-up
  };
}, []);

Q. useEffect와 async/await이 같은가?

async/await은 비동기 작업을 처리하기위해 사용하는 자바스크립트 언어이다.
useEffect는 비동기 작업을 할 수 있는 컴포넌트의 side effect에 사용되는 리엑트의 훅이다.

두 기능은 완전히 다른 목적으로 사용하기때문에 다르다.

🤔 느낀점

프론트.. 언젠가 공부하고싶은데.. 어려워!!