[React] map / key

※ map()

  - 자바스크립트 배열의 map() 함수

 

  - 파라미터로 전달된 함수를 사용해서 배열 내의 각 요소를 원하는 규칙에 따라 변환 후 결과로 새로운 배열을 생성한다

 

▶ 문법

arr.map(callback, [thisArg])

  ▷ 파라미터 callback

         1. currentValue : 현재 처리하고 있는 요소

         2. 현재 처리하고 있는 요소의 index 값

         3. 현재 처리하고 있는 원본 배열 

   

  ▷ thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼스

 

 

 

 

예제 ) map 함수를 사용하여 배열 [1,2,3,4,5]의 각 요소를 제곱해서 새 로운 배열을 생성하자

 

Javascript

<script>
var numbers=[1,2,3,4,5];
var processed = numbers.map(function(num){
return num*num;
});
console.log(processed);
</script>

 

ES6

const nums = [1,2,3,4,5,6];
const result = nums.map(num => num*num);
console.log(result);

 

result = [1,4,9,16,25]

 

 

예제 ) 데이터 배열을 컴포넌트 배열로 반환하는 예제

import React from 'react';
const IterationSample = () => {
const names = ['눈사람', '얼음', '눈', '바람']; 	//1
const nameList = names.map(name => <li>{name}</li>);	//2
return <ul>{nameList}</ul>;		//3
};
export default IterationSample;

1. 문자열로 구성된 배열선언

2. 선언된 배열을 사용하여 <li>..<li> 코드로 된 배열을 새로 생성한 후 nameList 에 담는다

3. 기존배열로 컴포넌트로 구성된 배열생성완료

 

import React, { Component } from 'react';
import IterationSample from './IterationSample';
function App() {
return (<IterationSample />);
}
export default App;

  => map 함수에서 JSX 를 작성할 때는 DOM 요소를 작성해도 되고, 컴포넌트를 사용해도 된다

 

 

 

 

---

※ key

react key 사용이유 : 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내기 위해서

 

 

▶ key 설정하기

 - map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props 를 설정하듯이 설정하면 된다

 - key 값은 언제나 유일해야한다 (데이터가 가진 고유값을 key 값으로 설정해야함)

      ex ) 게시물 렌더링 시 게시물NO 가 key 값이 되야한다