인프런 커뮤니티 질문&답변

안녕하세요! map 메소드에서 화살표 함수 다음에 오는 () 와 {} 의 차이점에 대해 설명해 드리겠습니다.

1. items.map((item) => (...)) - 괄호 사용

이 방식은 암시적 반환(implicit return) 을 사용합니다:

const numbers = [1, 2, 3];
const doubled = numbers.map((number) => (number * 2));
// 결과: [2, 4, 6]

리액트에서 주로 JSX 요소를 반환할 때 이 방식을 많이 사용합니다:

const items = ['사과', '바나나', '딸기'];
const itemsList = (
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

이 방식의 특징:

• 값이 자동으로 반환됩니다 (return 키워드 필요 없음)

• 코드가 한 줄이거나 단일 JSX 요소를 반환할 때 깔끔합니다

• 괄호는 선택사항이지만, JSX를 반환할 때는 가독성을 위해 권장됩니다

2. items.map((item) => {...}) - 중괄호 사용

이 방식은 함수 본문(function body) 을 정의합니다:

const numbers = [1, 2, 3];
const doubled = numbers.map((number) => {
  // 여러 줄의 코드 작성 가능
  const result = number * 2;
  return result; // 명시적 return 필요
});
// 결과: [2, 4, 6]

리액트에서의 사용 예:

const items = ['사과', '바나나', '딸기'];
const itemsList = (
  <ul>
    {items.map((item) => {
      const upperCase = item.toUpperCase();
      return <li key={item}>{upperCase}</li>;
    })}
  </ul>
);

이 방식의 특징:

• 여러 줄의 코드를 실행할 수 있습니다

• 값을 반환하려면 반드시 return 키워드가 필요합니다

• 조건문이나 변수 선언 등 추가 로직이 필요할 때 사용합니다

요약

1. () => (...): 간단한 표현식, 자동 반환

2. () => {...}: 복잡한 로직, 명시적 return 필요

보통 단순히 JSX를 반환하거나 간단한 변환만 필요할 때는 첫 번째 방식을 사용하고, 데이터 처리나 조건부 로직이 필요할 때는 두 번째 방식을 사용합니다.

도움이 되셨으면 좋겠습니다!