JSX는 React 애플리케이션에서 UI를 렌더링하는 데 사용되는 JavaScript의 확장 문법입니다. 배열에 포함된 데이터를 리스트 형태로 표시해야 할 때, map 함수는 매우 유용합니다. 이 글에서는 JSX에서 map 함수를 사용하여 리스트를 렌더링하는 방법에 대해 알아보겠습니다.
map 함수란?
map 함수는 JavaScript 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 이는 배열의 각 요소를 변환하거나, 새로운 형태로 표시할 때 매우 유용합니다.
JSX에서 map 함수 사용하기
먼저, 배열을 선언하고 map 함수를 사용하여 JSX 요소로 변환하여 리스트를 렌더링할 수 있습니다. 아래는 map 함수를 사용하여 간단한 문자열 배열을 JSX 리스트로 변환하는 예시입니다.
const fruitList = ['Apple', 'Banana', 'Orange'];
const renderedList = fruitList.map((fruit, index) => (
<li key={index}>{fruit}</li>
));
return <ul>{renderedList}</ul>;
위 예시에서 fruitList.map은 각 과일을 <li> 요소로 변환하여 renderedList 배열을 반환합니다. 이후, <ul>{renderedList}</ul> 코드를 통해 리스트를 렌더링할 수 있습니다.
key 속성 활용
배열을 JSX로 변환할 때, 각 요소에는 고유한 key 속성을 제공해야 합니다. React는 key 속성을 통해 배열의 각 항목을 식별하여 효율적인 업데이트를 가능하게 합니다.
결론
JSX에서 map 함수를 사용하여 배열을 리스트 형태로 렌더링하는 것은 매우 흔한 패턴입니다. map 함수의 활용과 key 속성의 활용은 React 애플리케이션을 개발할 때 중요한 부분이므로, 익숙해지는 것이 좋습니다.
위 예시를 참고하여 JSX에서 map 함수를 사용하여 리스트를 렌더링하는 방법에 대해 간단히 알아보았습니다.
참고자료: