React map() 함수 정리

map() 

• 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

 

구문

arr.map(callback, [thisArg])

매개변수

• callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가짐

- currentValue : 처리할 현재 요소

- index (선택) : 처리할 현재 요소의 인덱스

- array (선택) : map()을 호출한 배열

• thisArg (선택) : callback을 실행할 때 this로 사용되는 값

 

예제

let examples = [1,2,3];

let result = example.map((example) => {return num * num }); // 결과 1,4,9

 

const bookItems = this.props.books.map(book => {
            return (
                <BookListItem 
                  book = { book }
                  key={ book.ISBN } 
                  onSelectedBook = { this.props.onSelectedBook }
                />
            )
        })

 

 

const userList = this.state.users.map( user => { //users = state의 users 가져오기, users 중 하나의 user
	return <ListItemText primary = {user.name} //primary = data 
    					 key = {user.key} />   //key = index보단 유니크한 다른 변수 설정이 좋음
})

 

 

 

 

↓ 컴포넌트 mapping 예제 보러가기 ↓

[React.js] 강좌 6-1편 컴포넌트 Iteration (반복) – Map | VELOPERT.LOG