들어가며
컴포넌트의 리턴문 안에서 다중 조건에 따라 다른 value를 적용하고 싶어서 처음에는 삼항 연산자에 조건을 덧붙여서 사용했으나, 가독성면에서 좋지 않은 것 같다는 생각이 들었다. 그래서 switch 문을 이용하여 조건에 따라 다른 value를 반환하는 함수를 만들어서 호출하는 방식으로도 바꾸어보았지만, 그럴 필요없이 자바스크립트의 IIFE 를 이용하면 된당.
IIFE란?
IIFE(Immediately Invoked Function Expression)는 함수를 정의하고 즉시 실행하여 함수 내부의 코드를 실행하는 패턴이다.IIFE 를 사용하면 함수가 정의되자마자 바로 실행되며, 반환된 결과가 JSX의 내용으로 사용된다.
사용 예시
const Product = () => {
return (
<>
{(() => {
const criterion = product.criterion;
const value = product[criterion];
switch (criterion) {
case "CONVERSION_RATE_SESSION":
return value.toFixed(3);
case "REVENUE":
return value.toLocaleString();
default:
return value;
}
})()}
</>
)
}
위 코드에서는 {} 안에 IIFE를 작성하고 있다.
맨 마지막에 있는 ()가 IIFE를 실행하는 역할을 하며, 함수가 즉시 실행되고 반환된 결과가 JSX의 내용으로 사용된다.
따라서 {} 안에 있는 IIFE가 실행되면서, 내부의 조건문(criterion 값에 따라 value 값을 처리하여 반환)에 따라 원하는 결과가 컴포넌트의 반환 값으로 출력된다.
함수를 function() {} 과 같이 작성되면,이 코드는 함수 선언문(statement) 으로 해석된다.
반면, () 와 같이 괄호로 묶어주게 되면 이것은 함수 선언문이 아닌 함수 표현식으로 해석된다.
IIFE 사용 이유
1. 블록 스코프
IIFE를 사용하여 코드를 감싸면, 내부에 있는 변수들이 블록 스코프를 가지게 된다. 이는 외부에 있는 변수들과 겹치지 않아서 변수명 충돌을 방지 하는 데 도움이 된다.
2. 깔끔한 JSX
IIFE를 사용하면 JSX에서 불필요한 변수 선언을 최소화 할 수 있다. 함수 안에서 필요한 계산을 하고, 최종 결과만 JSX에 사용할 수 있다.
마치며
선언 하자마자 실행시킬 수 있는 방법이 이미 만들어져있는게 넘 신기하고... 역시 JS에는 없는게 없당
끗 !! 🐰
