React에서 Map함수를 적용하면서 배운 것들

지난번 React JS는 왜 사용하는 것일까? 라는 글을 쓰다가 말았다.
정글을 수료하고나서 다시 React를 공부하며 Javascript 문법을 적용하고 있는데
그 과정에서 Map 함수 정리하면 좋을 것 같아서 글을 써보려고 한다.

케이스 1

const food = ['김치','된장','고추장'];

<ul>
  <li class="list"><h4>{food[0]}</h4></li>
  <li class="list"><h4>{food[1]}</h4></li>
  <li class="list"><h4>{food[2]}</h4></li>
</ul>

위와 같이 백엔드에서 food라는 배열 데이터를 받았다고 가정할때
데이터 바인딩하기 위해 위와 같이 사용하는 경우가 있다.
데이터가 정해져있고 크기가 작다면 위와 같이 호출해도 되지만, 배열의 전체 길이를 알 수 없고,
길이가 매우 길다면 위와 같은 방식으로 일일이 늘릴 수는 없다.

케이스 2

const food = ['김치','된장','고추장','김치','된장','고추장'];

<ul>
  {food.map(function(item, index){
    	return (
        	<li class="list"><h4>{food[index]}</h4></li>
        );
  })}
</ul>

그래서 반복되는 배열의 데이터를 바인딩 하기 쉽게하려고 Map함수 사용한다.
반복되는 구조에 데이터만 바뀌는 경우 우리는 들어오는 데이터만 바꿔서 처리하려고 한다.
Map 함수는 어떻게 동작하길레 같은 결과를 내는 것일까?

Map함수 사용법

1. array 자료 갯수만큼 함수안의 코드 실행해줌
2. 함수의 첫번째 파라미터는 array안에 있던 자료를 한개씩 출력
3. 함수의 두번째 파라미터는 array안에 있던 자료의 index 번호
4. return에 적으면 map함수 전체 결과값을 array로 담아줌

// array 자료 갯수만큼 함수안의 코드 를 실행
[1,2,3].map(function(){
	console.log(1); 
})
// 1
// 1
// 1

// 함수의 첫번째 파라미터는 array안에 있던 자료를 한개씩 출력
// 함수의 두번째 파라미터는 array안에 있던 자료의 index 번호
[1,2,3].map(function(item, index){
	console.log(item, index); 
})
// 1 0
// 2 1
// 3 2

// return을 사용하면 map함수 실행 후  return 전체 결과값을 array로 담아줌
[1,2,3].map(function(item){
	return 1234;
})
// [1234, 1234, 1234]

그래서 React에서 Map 함수를 사용하여 결과값을 return을 해주게 되면
아래와 같이 출력되게 되고 React는 [ ]를 빼고 안의 값들을 출력해주게 된다.

[
	<li class="list"><h4>{결과값1}</h4></li>, 
    <li class="list"><h4>{결과값2}</h4></li>,
    <li class="list"><h4>{결과값3}</h4></li>,
    ...
    <li class="list"><h4>{마지막 결과값}</h4></li>
]

ForEach를 써서 반복문을 사용해서 배열을 만들어서 담아도 되지만
Map함수를 사용하여 불필요하게 두번 값을 담을 필요없게 된다.

그래서 이러한 경우에는 Map함수를 사용하는게 좋다