React Array.prototype.map()

 

 

React를 공부하다보니 새삼 map매소드의 강력함과 편리함을 느끼게 된다. 

 

처음 map메소드를 배울 때는 왜 개발자들은 이런 요상한걸 만들었을까.. 하고 생각했지만, 

 

학습을 진행하면서 필요성을 절실하게 느끼게 된다. 

 

오늘은 React 실습 중에 "Delete" 버튼 구현에 꽤나 애를 먹었다. 

 

데이터를 컴포넌트끼리 주고받는 것은 이해를 했지만 "Delete" 버튼은 특별히 "어떤" 데이터를 지우고 싶은지

 

그 정보를 특정할 수 있어야 했는데 아무리 생각해도 방법이 생각나지 않는 것이다. 

 

(구글링을 해도 전부 Class props를 이용한 방법들 뿐이었다.)

 

 

결국 처음으로 GG를 외치고 Reference 코드를 살펴보니 이럴수가..!

 

map 메소드에는 매핑되는 각 엘리먼트에 인덱스를 부여할 수 있는 방법이 있었다...!

 

그래서 오늘은 map에 대해 좀 자세히 알아보고자 한다. 

 

 

Syntax

 

arr.map ( callback ( currentValue[, index[, array]]) [, thisArg] )

 

map 메소드는 크게 두개의 파라미터로 나뉜다. 

 

1. Callback 파라미터

2. thisArg 파라미터 (Optional)

 

Callback은 말 그대로 콜백함수가 들어가는 파라미터다.

thisArg는 Callback을 실행 할 때 this로 사용되는 값이다.  

MDN에서는 이렇게 설명만 되어있고 예제는 안타깝게도 나와있지 않다... ㅠㅠ 

이 부분은 훗날 this에 대해 공부하면서 알아가도록 하자. 

 

자 그렇다면 Callback파라미터는 또 어떻게 세분화 가능할까?

 

1. currentValue: 처리할 현재 요소

2. index (Optional): 처리할 현재 요소의 인덱스

3. array (Optional): map을 호출한 배열

 

이렇게만 서술하면 이해하기 어려우니 직접 찍어보자. 

 

let arr = ['Hello', 'My name is', 'Sean'];

let result = () => arr.map( (currentValue, index, array) => console.log(currentValue, index, array));

result();

 

위의 코드를 실행신 결과는 아래와 같다.

 

Hello 0 [ 'Hello', 'My name is', 'Sean' ]
My name is 1 [ 'Hello', 'My name is', 'Sean' ]
Sean 2 [ 'Hello', 'My name is', 'Sean' ]

 

위에서 알 수 있듯이 currentValue에는 순환하고 있는 순환값이 그리고 index는 그 인덱스 값 마지막으로는 array는 순환대상이 되는 배열이 들어감을 알 수 있다.