React에서 JSX 안에 반복문 사용하기

문제: JSX 안에서 for문을 어떻게 사용하나요?

React에서 UI를 구성할 때, 배열이나 목록을 처리해야 할 상황이 자주 발생합니다. 특히, JSX 내부에서 이를 어떻게 해야 하는지가 문제가 될 수 있습니다. 일반적인 프로그래밍 언어에서는 반복문을 사용해서 배열의 각 요소를 처리할 수 있지만, JSX는 조금 다릅니다. 이 문제에 대한 해결책을 설명합니다.

해결책: map 함수를 이용하자

React에서는 배열을 JSX 요소로 쉽게 변환할 수 있도록 map 함수를 제공합니다. map 함수는 배열의 각 요소를 원하는 형태의 JSX 요소로 변환할 수 있습니다. 아래에 간단한 예시 코드를 보겠습니다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => 
  <li key={number.toString()}>
    {number}
  </li>
);

return (
  <ul>{listItems}</ul>
);

이 코드에서는 numbers라는 이름의 배열을 선언하고, 이 배열을 map 함수에 넘겨서 새로운 JSX 요소 배열을 생성합니다. key 속성은 React가 각 요소를 식별할 수 있게 도와줍니다. map 함수는 원래 배열을 변경하지 않고, 새로운 배열을 반환합니다.

주의사항: key 속성은 필수

위의 예시에서 볼 수 있듯이, map 함수를 사용할 때는 각 JSX 요소에 고유한 key 속성을 주어야 합니다. 이 key는 React가 렌더링 성능을 최적화하기 위해 사용되므로, 중복되지 않고 고유해야 합니다.