맵은 데이터가 쌍의 형태로 저장되는 데이터 수집 유형입니다. 여기에는 고유한 키가 포함되어 있습니다. 맵에 저장된 값은 키에 매핑되어야 합니다. map()에는 중복된 쌍을 저장할 수 없습니다. 이는 저장된 각 키의 고유성 때문입니다. 주로 빠른 검색 및 데이터 조회에 사용됩니다.
React에서는 ?map? 구성 요소의 유사한 개체 목록을 탐색하고 표시하는 데 사용되는 방법입니다. 지도는 React의 기능이 아닙니다. 대신 모든 배열에서 호출할 수 있는 표준 JavaScript 함수입니다. map() 메서드는 호출 배열의 모든 요소에 대해 제공된 함수를 호출하여 새 배열을 만듭니다.
예
주어진 예에서 map() 함수는 숫자 배열을 가져와 그 값을 두 배로 늘립니다. map()이 반환한 새 배열을 doubleValue 변수에 할당하고 이를 기록합니다.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); React에서 map() 메소드는 다음 용도로 사용됩니다.
1. 목록 요소를 순회합니다.
예
import React from 'react'; import ReactDOM from 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li> ); return ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = ['A', 'B', 'C', 'D', 'D']; ReactDOM.render( , document.getElementById('app') ); export default App; 산출
2. 키를 사용하여 목록 요소를 탐색합니다.
예
import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('app') ); export default App; 산출
