[리액트] 렌더링 리스트, map, 배열안 태그

기존에  return 부분에서 JSX 문법 태그들을 map 하여 프로젝트를 여러번 진행하였다.

이때는 정신없이 결과를 만들기위해서 깊게 다뤄보지 못한 return에서 렌더링하는 map함수와 그안에있는 태그들을 다뤄보겠다.

여기서 무의식중에 '아 soundTrack이라는 배열안에 정리되어있는 객체들을 map함수로 맵핑해서 그 객체에 접근해서 각각의 키값을 원하는 컴포넌트 안에 값을 넣어줘서 출력하게 해줘야겠다' 까지 생각하고 썼다. 그런데 좀더 디테일하게 들어가보면 배열안에 객체에 접근해서 사용한다는건 알겠는데 그위로 <Sound>, <Icon>, <Text> 들도 똑같이 맵핑된다는건데 이는결국 

{[<Sound id={} key={} ...><Icon src={...}></Icon></Sound>, 
<Sound id={} key={} ...><Icon src={...}></Icon></Sound>, 
<Sound id={} key={} ...><Icon src={...}></Icon></Sound>]
}

이런식으로 배열안에 <>태그들이 들어가게된다는거다.

좀더 심플한 예제로

이와같이 JSX 문법안에서 JS를 사용하기위해 중괄호를 쓰고{} 그안에 배열을 만들고 그 안에 div 태그를 넣고 gg 라는 문자열과, g1g 라는 문자열 을 각각 인덱스0, 1 에 넣어주었다.  즉

[<div>gg</div>, <div>g1g</div>]

인 배열인것이다. 결과는

이런식으로 똑같이 div 태그가 출력된다. 즉 return 부분에 js{}안에 배열로 태그를 담아놓아도 똑같이 출력이 된다는것이다.