IIFE로 비동기 구문 간결하게 정리하기

React useEffect hook의 비동기 구문을 간결하게 정리하는 방법에 대해 알게 되어 정리하고자 한다. React hook에 상관 없이 사용될 수 있는 Javascript Function이다.

()()은 IIFE (즉시 실행 함수 표현, Immediately Invoked Function Expression) 이라고 한다. 첫번째 괄호는 익명함수를 감싸 실행 될 함수가 전역 스코프에 불필요한 변수를 추가하거나, IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이고 두번째 괄호는 즉시 실행 함수를 생상하는 괄호이다, 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다고 한다.

다음과 같이 정리해보았다.

useEffect(() => {
    (async () => {
      const data = await (
        await fetch(`${END_POINT}`)
      ).json();
    })();
  }, []);