[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>
));