[React] 컴포넌트 반복, map()함수

map()함수

map 함수를 사용하여 반복되는 컴포넌트를 렌더링.

파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열 생성

 

arr.map(callback, [thisArg])

Parameters:

• Callback : 새로운 배열의 요소를 생성하는 함수
• currentValue : 현재 처리하고 있는 요소
• index : 연재 처리하고 있는 요소의 index 값
• array : 현재 처리하고 있는 원본 배열
• thisArg : callback 함부 내부에서 사용할 this 레퍼런스

const number = [1,2,3,4,5];
const process = number.map(function(num){
	return num*num;
})

//process = [1,4,9,16,25]

const number = [1,2,3,4,5]
const process = number.map(num => num * num)

//process = [1,4,9,16,25]

 

---

컴포넌트 배열

아래 두 코드는 같다. 

 

<ul>
      <li>눈사람</li>
      <li>얼음</li>
      <li>눈</li>
      <li>바람</li>
</ul>

import React from 'react';
const App = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const nameList = names.map((name, index) => <li key={index}>{name}</li>)

  return <ul>{nameList}</ul>
}


export default App;

---

key

요소의 리스트를 만들 때,

React가 어떤 아이템이 바뀌었는 지, 혹은 추가되었는 지, 혹은 삭제되었는 지를 인식하는데 사용.

 

-  key는 요소의 고유한 값이어야 하므로 배열 요소의 id를 사용하거나 index로 사용한다.

   (단, index는 배열의 순서가 바뀌면 index도 바뀌기 때문에 권장하지 않음.)

const array = [{id:id1, value:눈사람},{id:id2, value:눈}, {id:id3, value:겨울}]

return(
	<>
    	{/* key를  id로 사용 */}
        {array.map((obj, index) => <li key={obj.id}>{obj.value}</li>}

        {/* key를  index로 사용 */}
        {array.map((obj, index) => <li key={index}>{obj.value}</li>}
    </>
)

 

-  컴포넌트 배열인 경우 key는 컴포넌트 자체에 부여해야 한다.

const listItems = ({obj}) => {
	return(
    	<li>{obj.value}</li>
    )
}

// 렌더링 되는 아이템 컴포넌트의 props에는 key를 받지 않는다.

const array = [{id:id1, value:눈사람},{id:id2, value:눈}, {id:id3, value:겨울}]

return(
	<>
        {/* listItems 컴포넌트에 배열의 key 부여 */}
        {array.map((obj, index) => <listItems key={obj.id} obj={obj}/>}
    </>
)

 

- 두개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

const array = [{id:id1, value:눈사람},{id:id2, value:눈}, {id:id3, value:겨울}]

return(
    <>
        {array.map((obj, index) => <listItem key={obj.id} obj={obj}/>}
        {array.map((obj, index) => <listItem key={obj.id} obj={obj}/>}
    </>
)

 

 

예제)

 

---

참조 :

리액트를 다루는 기술(김민준 / 길벗)

reactjs-kr.firebaseapp.com/docs/lists-and-keys.html