[React] 배열을 매핑할 때 중괄호 {}와 소괄호 () 차이점

1. {}

{items.map((item, index) => {
  const processedItem = item.toUpperCase(); // 추가적인 로직
  return (
    <div key={index}>
      {processedItem}
    </div>
  );
})}

중괄호 {}를 사용하는 방식은 함수 본문을 명시적으로 작성하고 명시적으로 return 키워드를 사용하여 값을 반환해야 합니다. 여러 줄의 코드를 작성하거나 복잡한 로직을 처리할 때 유용합니다.

2. ()

{items.map((item, index) => (
  <div key={index}>
    {item.toUpperCase()}
  </div>
))}

소괄호 ()를 사용하는 방식은 암시적으로 값을 반환하며, 주로 간단한 JSX를 반환할 때 사용됩니다. 코드가 간결하고 가독성이 좋아집니다.