useEffect와 IIFE

이번 글에서는 최근에 우연히 공부하게 된 'IIFE'라는 꽤나 유용한 개념에 대해 이야기 하려고 합니다.

꽤나 어렵지 않은 개념이니 한 번 공부해둔다면 여러모로 도움이 될 것 같습니다 :)

 

What is 'IIFE'

IIFE는 Immediately Invoked Function Expression의 약자로, 정의와 동시에 즉시 실행되는 JavaScript 함수를 의미합니다. 

 

IIFE는 다음과 같은 형태를 가집니다.

(function() {
    console.log("This is an IIFE");
})();

 

IIFE에서는 '()()', 이 괄호 두개가 하는 역할을 아는 것이 중요합니다.

첫번째 괄호는 ()로 감싸진 익명함수입니다. 이는 전역 스코프에서 불필요한 변수로 인해 일어나는 오염을 방지하고, IIFE 내부 변수를 외부에서 접근하는 것도 방지할 수 있습니다.

두번쨰 괄호는 즉시 실행할 함수를 생성하는 괄호입니다. 이를 통해서 Javascript가 함수를 즉시 실행시킵니다.

 

이러한 IIFE는 useEffect와 함께 적절히 사용하면 성능적인 이점을 가져올 수 있습니다.

useEffect & IIFE

사실 IIFE를 useEffect 내부에서 사용하는 경우는 많지 않습니다. 그러나 useEffect는 비동기 함수를 지원하지 않기 때문에, 비동기 작업을 수행할 때 IIFE를 유용하게 활용할 수 있습니다.

 

다음은 IIFE를 사용하여 비동기 작업을 수행하는 코드입니다.

useEffect(() => {
  (async () => {
      try {
        const response = await fetch('https://api.example.com/data');
	const data = response.data;
	console.log(data);
      } catch (error) {
      }
  })();
}, []);

위의 예제에서는 'async() => { ... }()' 부분이 IIFE를 활용한 코드입니다.

 

이렇게 IIFE를 사용함으로써 useEffect 내부에서 비동기 작업을 수행할 수 있게 되며, 외부에서의 변수(response, data) 접근을 방지하면서 추가적인 문제를 예방하게 됩니다.

 

그러나, 이러한 IIFE도 물론 단점이 존재합니다.

IIFE가 익숙하지 않다면 코드를 해석하는 과정에서 가독성의 문제가 생길 수 있고, IIFE는 정의와 동시에 한 번만 실행되기 때문에 동일한 로직을 여러 번 실행할 필요가 있을 경우 재사용성이 떨어질 수 있습니다.

즉, 특정 상황에서 매우 유용할 수 있지만, 코드 가독성, 유지보수성 등을 고려할 때 항상 최선의 선택은 아닐 수 있다는 말입니다. 

그렇기에 사용을 고민 중이라면 이러한 특성들을 잘 고려해보시는 것을 권장드립니다 :)

도움이 된 글

https://songchive.tistory.com/5