[React.js] map 함수를 사용할 때 중괄호({})와 소괄호(())

map 함수를 사용할 때 중괄호({})와 소괄호(())

들어가며

• 리액트(React)에서 중괄호 {}와 소괄호 ()는 주로 JSX 안에서 사용되며, 특히 map() 메서드와 함께 사용될 때 주의해야 할 점이 몇가지 있다.
• map 함수를 사용할 때 중괄호({})와 소괄호(())를 사용하는 경우의 차이에 대해 알아보자.

 

중괄호({})

• 자바스크립트 표현식(Expression)을 감싸기 위해 사용된다.
• 중괄호를 사용할 때는 반드시 반환값이 있어야 하며, 명시적으로 return 키워드를 사용해서 값을 반환해야 한다.
• 여러 줄의 코드가 필요하거나 조건문 등 복잡한 로직을 작성해야 할 때 사용한다.

			
			
			
		
const items = ['Apple', 'Banana', 'Cherry'];
 
const listItems = items.map((item) => {
  return <li key={item}>{item}</li>;
});
 
return (
  <ul>
    {listItems}
  </ul>
);

 

• 위의 코드를 다음과 같이 중괄호({})와 return 키워드를 생략하여 소괄호(())로 사용할 수 있다.

			
			
			
		
const items = ['Apple', 'Banana', 'Cherry'];
 
const listItems = items.map(item => (
  <li key={item}>{item}</li>
));
 
return (
  <ul>
    {listItems}
  </ul>
);

 

• 이럴 경우, 객체는 다음과 같이 반환할 수 있다.

			
			
			
		
const items = ['Apple', 'Banana', 'Cherry'];
 
const objectList = items.map(item => ({
  id: item,
  name: item
}));
 
console.log(objectList);
// Output: [{ id: 'Apple', name: 'Apple' }, { id: 'Banana', name: 'Banana' }, { id: 'Cherry', name: 'Cherry' }]

 

소괄호(())

• JSX를 바로 반환하는 경우에 사용된다.
• 이 경우에는 return 키워드를 생략할 수 있으며, 암시적으로 반환값이 처리된다.
• 주로 한 줄로 작성할 때 이 방법을 사용한다.
• 단순히 JSX를 반환하는 경우, 더 간결하게 작성하고 싶을 때 사용한다.

			
			
			
		
const items = ['Apple', 'Banana', 'Cherry'];
 
const listItems = items.map((item) => (
  <li key={item}>{item}</li>
));
 
return (
  <ul>
    {listItems}
  </ul>
);

 

요약

• 중괄호({})는 자바스크립트 표현식을 실행하는 블록을 만들며, 명시적으로 return을 사용해야 한다.

			
			
			
		
items.map((item) => {
  return <li key={item}>{item}</li>;
});

 

• 소괄호(())는 JSX를 암시적으로 반환하며, return 키워드를 생략할 수 있다.

			
			
			
		
items.map((item) => (
  <li key={item}>{item}</li>
));