#React_map함수 내에서 JSX를 반환할 때 괄호의 차이

map함수 내에서 중괄호를 사용하면 그 안의 코드는 블록스코프를 가지는 코드블록으로 간주됩니다.

즉, 함수의 본문으로 해석되기 떄문에 명시적으로 return을 사용해야 합니다.

{someArray.map((ele:{ a:string; b:string; c:string; })) => {
  return(
   <React.Fragment key={ele.a}>
      <p>{ele.b}</p>
      <p>{ele.c}</p>
   </React.Fragment>
  )
}};

 

map함수 내에서 JSX를 반환할 때 소괄호를 사용하면 암시적 반환을 하여 표현식을 바로 반환합니다.

{someArray.map((ele:{ a:string; b:string; c:string; })) => (
   <React.Fragment key={ele.a}>
      <p>{ele.b}</p>
      <p>{ele.c}</p>
   </React.Fragment>
  ))
};

 

 

암시적 반환 <=> 명시적 반환이란?

 

명시적반환과, 임시적 반환은 자바스크립트 화살표 함수의 반환 방식에 관한 것이며 모든 자바스크립트 코드에서 적용됩니다.

 

자바스크립 화살표 함수의 반환방식

 

명시적 반환 (explicit return)

중괄호를 사용하여 함수 본문을 작성하고, 반환값 앞에 return 키워드를 명시적으로 작성하는 방식

// 중괄호를 사용했기 때문에 return을 명시적으로 작성해줘야 한다.
const example = () => {
  return a + b + c; 
}

 

임시적 반환 (implicit return)

중괄호를 사용하지 않고, 함수 본문의 표현식을 자동으로 반환하는 방식

단일 표현식일 경우, 소괄호도 작성하지 않아도 된다.

// 중괄호를 사용하지 않는다. 단일표현식을 ()소괄호 없이 바로 반환한다.
const implictExample = () =>  a + b + c;

// 여러줄 일 경우(한줄로 작성하지 않을 경우), 소괄호를 사용하여 반환한다.
const implictExample2 = () => (
	a + b + c;
)

 

여러 줄일 경우(=한줄로 작하지 않을 경우)

소괄호를 사용하여 표현식을 반환한다.