반응에서 map 메소드는 구성요소의 유사한 객체 목록을 탐색하고 표시하는 데 사용됩니다. map 메소드는 반응에 고유하지 않으며 모든 배열에서 표준 JavaScript 함수를 호출할 수 있습니다. 배열을 생성합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
맵(Map)은 데이터를 쌍(Pair) 형태로 저장하는 데이터 수집형이다. 여기에는 맵에 저장된 값을 매핑해야 하는 고유 키가 포함되어 있습니다. map()에는 중복 쌍을 저장할 수 없습니다. 이는 저장된 각 키가 고유하고 주로 빠른 검색 및 데이터 찾기에 사용되기 때문입니다.
React에서 map 메소드는 구성 요소의 유사한 객체 목록을 반복하고 표시하는 데 사용됩니다. 대신 map은 모든 배열에서 호출할 수 있는 표준 JavaScript 함수입니다. map() 메서드는 호출 배열의 각 요소에 대해 제공된 함수를 호출하여 새 배열을 만듭니다.
예
주어진 예에서 map() 함수는 숫자 배열을 받아 그 값을 두 배로 늘립니다. map()에서 반환된 새 배열을 doubleValue 변수에 할당하고 이를 기록합니다.
var 숫자 = [1, 2, 3, 4, 5]; const doubleValue = 숫자.map((숫자)=>{ return (숫자 * 2); });React에서 map() 메소드는 다음 용도로 사용됩니다.
1. 목록 요소를 탐색합니다.
예
import React from 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li > ); return ( <div> <h2>반응 맵 예시</h2> <ul>{listItems}</ul> </div> ) const myLists = ['A', 'B', 'C' , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );2. 키로 목록 요소를 탐색합니다.
예
import React from 'react-dom'; function ListItem(props) { return <li>{props.value}</li> } function NumberList(props) { const 숫자 = props.numbers; const listItems = number.map((number) => <ListItem key={number.toString()} value={number} /> ) return ( <div> <h2>React Map 예시</h2> <ul> {listItems} </ul> </div> ); } const 숫자 = [1, 2, 3, 4, 5] ReactDOM.render( <NumberList 숫자={numbers} />, document.getElementById('app' ) );