[React] Map() | functional programming | Mapping Data to Components

연락처 카드 만들기를 하고 있다. 

 

App.jsx 에 있는 코드를 보면 

 

 

Card 컴포넌트 안에 다른 value에 같은 properties가 계속 반복되어 나오는 것을 볼 수 있다. 

좀 더 간단하게 만드는 법은 없을까? 

 

 

이 때 map() 함수를 사용하면 아주 간편해진다. 

 

 

 

map( ) 

 

map() 함수란? 

array를 처리할 때 매우 유용한 자바스크립트 함수이다. 

 

 

map() 사용법

arrayName.map(함수) 

array 이름을 앞에 두고

점을 찍은 후

map() 함수를 뒤에 붙여준다. 

그리고서 map() 함수 안에 작업할 함수를 넣어준다. 

 

 

이 전까지는 함수 안 괄호() 안에 value를 대부분 집어 넣었는데,

() 안에 함수도 집어 넣을 수 있다. 

map() 안에 함수를 집어 넣고 통과하면서 함수가 실행되도록 한다. 

이 것을 functional programming 이라고 한다. 

 

 

 

---

functional programming

함수 안에 함수 넣어 실행하는 것을 말한다. 

그 Nested 함수 안에 또 Nested 함수 넣어 실행하게 할 수도 있다. 

 

 

---

 

 

App.js 함수를 다시 정리해 보자. 

 

일단 map() 함수를 contacts array에 붙여주고 

자바스크립트 오브젝트로 감싸준다. 

 

 

contacts array를 보면 자바스크립트 오브젝트로 구성된 3개의 items를 가지고 있다.

properties는 모두 같고, value는 각각 다르다. 

 

 

 

 

map() 함수 안에 통과 시킬 creatdCard() 함수를 만든다. 

 

 

 

주의 

contacts.js 에서 오브젝트 가져올 때 

오브젝트 키 대소문자 꼭 확인 후 아님 복사해서 가져오기 

이 것 찾느라 개고생 ㅡ.ㅡ;

* img={contact.imgURL}

*tel={contact.phone}

아래 있는 사진들도 img, imgUrl로 죄다 오락가락함. 

다 고쳐야 하지만 귀찮아서 그냥 두겠습니다... 

 

 

createdCard() 함수에서 

contacts array에 있는 오브젝트를 하나씩 인식해

Card 컴포넌트 안 properties에 담아 보도록 하자.

파라미터는 contact로 하였다. 

contact(단수)는 오브젝트 하나이고

contacts(복수)는 array이다.

 

 

 

 

다음은  map 함수 안에서 CreatedCard 함수가 호출 되도록 한다. 

 

 

 

 

여기서 map 함수가 

contacts array에 있는 아이템 하나씩에 

createCard 함수를 적용시키는 역할을 한다. 

 

 

 

 

 

모든 내용이 잘 나오는 것을 볼 수 있다. 하지만...

 

 

 

여기서 콘솔을 보면 경고가 뜬다. 

 

 

 

 

리액트는 virtual DOM으로 만들어 홈페이지 여기저기서 쓸 수 있게 되어있다. 

각 document에 고유의 번호를 붙여줘 식별할 수 있게 해야한다.  

 

 

 

 

contacts 에 각 id 넘버를 부여한 후 

contact.js

 

 

createCard에 추가 한다. 

 

 

 

---

 

카드 UI에 순번 나오게 하기 

 

 

Card 탬플릿에서

{props.key}를 넣어 화면에 나오게 해보자. 

하지만 key는 prop이 아니다 라는 에러가 발생한다. 

 

 

key property는 특별한 property이다. 

key= {contact.id}는 우리가 사용하도록 되어있지 않다. 

 

 

 

 

그래서  id ={contact.id}로

고유 번호 식별을 위해 만들어 준다. 

createCard

 

 

 

Card 탬플릿에서 props.id로 정정한다.

 

 

 

 

번호가 잘 나오는 것을 볼 수 있다. 

 

 

 

그로 카드에 숫자가 필요할 때 key가 아니라 

id를 따로 만들어 사용해야 한다.