IIFE 즉시 실행 함수 (() => {})

 

IIFE(Immediately Invoked Function Expression)

IIFE는 즉시 실행 함수로, 함수 선언과 동시에 실행된다.

복잡한 조건부 렌더링에서 사용하면 동적으로 값을 계산하거나 여러 조건을 처리할 수 있다.

 

function Example({ user }) {
  return (
    <div>
      {(() => {
        if (!user) return <h1>Please log in.</h1>; // user가 없으면 이 메시지
        if (user.role === 'admin') return <h1>Welcome, Admin!</h1>; // admin인 경우
        return <h1>Welcome, User!</h1>; // 기본값
      })()}
    </div>
  );
}

 

1. 함수 (() => {...}) 선언
2. ()로 즉시 실행
3. 실행 결과를 리턴하여 JSX에 삽입

IIFE를 사용하는 이유

• 복잡한 조건 처리 : 여러 조건이 포함되면 if/else를 함수 내부에 캡슐화 할 수 있다.(복잡한 조건문이나 로직을 내부에 감춰서 다른 코드와 분리하고 외부에 영향을 주지 않도록 만들 수 있다.)
• 코드 분리 : JSX 구조로 로직을 분리하여 읽기 편하게 만듦 (JSX 내부에는 복잡한 계산없이 결과만 표시)

IIFE의 단점

• 복잡성이 커지면 가독성이 떨어질 수 있다. 이 경우 컴포넌트 분리가 더 나은 선택일 수 있다.