React 자바스크립트 배열 내장함수 map 이용해서 렌더링 하기

만약에 데이터를 서버에서 끌어왔는데 개수가 10개라고 치자. 각 개수를  나타내주고 싶은데 일일이 각 <div>태그 안에 넣어주고 싶진 않을 것이다.. 쌉 노가다.. 

 

버거킹 사이트를 클론하면서 공부하고 있기에 위의 사진화면 처럼 저 각각의 가게점들을 map을 이용해서 화면에 뿌려줘 보겠당!

 

우선 map 함수가 뭔지 알아야 될 텐데 간단히 말하면 배열을 '순회공연' 한다고 생각하면 되겠다. 

배열내의 인덱스를 하나하나 돌면서 본인이 원하는 리턴값을 지정해줄 수 있다 == 자유도가 높은 배열 함수 라고 보면 되겠다. 

 

const numbers = [1,2,3,4,5];

numbers.map(number => {
	return number + 1;
} )

numbers // [2,3,4,5,6]

 

어떤 느낌인지 정도만 알아두고 사용하면 되겠다. 

 

 

 

데이터가 성공적으로 원하는대로 나오는지를 체크하는지 우선 확인하느라 스타일링은 아직 미처 하지 못했당.. 

 

map을 이용해서 컴포넌트를 뿌려 줄 때가 많기 때문에 사용법에 익숙해지는 것이 좋겠다.