[TIL] 컴포넌트 반복하기 - map() 함수 사용

 

리액트로 무언가를 만들다보니 반복적인 코드가 꽤나 많이 나왔고, 이 코드를 계속 나열하다보니 왕왕초보인 내가 봐도 굉장히 길고 보기만해도 현기증나는^^,, 단순 반복의 코드들이 작성 되어 있었다.

 

이럴때 자바스크립트 map() 함수를 사용하면 컴포넌트를 더 효율적으로 관리할 수 있다 

 

 

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

 

map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 함수이다. 

즉, callbackFunction을 실행한 결과를 이용해 새로운 배열을 만들어 낸다. 

 

 

예제코드

var numbers = [1, 4, 9];
var doubles = numbers.map(function (num) {
	return num * 2;
});
// doubles = [2, 8, 18]

 

 

📝 데이터 배열을 컴포넌트 배열로 변환하기 

IterationSample.js  파일을 생성한다. 

import React from 'react'; 

const Iterationsample = () => {
	const names = ['눈사람', '얼음', '눈', '바람'];
    const nameList = names.map((name) => <li>{name}</li>);
    
    return <ul>{nameList}</ul>;
};

export default IterationSample;

namesList에 <li>눈사람</li>, <li>얼음</li>, <li>눈</li>, <li>바람</li> 의 컴포넌트로 구성된 배열이 저장된다.

App 컴포넌트로 돌아와서 렌더링 해보면

 

App.js

import React from 'react';
import IterationSample from './components/IterationSample';

function App() {
	return (
    <>
    	<IterationSample />
    </>
  );
}

export default App;

 

 

 

아래와 같이 원하는 대로 렌더링이 된 것을 볼 수 있다. 그런데 console 창에서 'key' prop이 없다는 경고가 뜸!!

 

 

 

 

📝 Key 란 무엇일까

컴포넌트를 렌더링 하였을 때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 사용한다. 만약 key가 설정되지 않았다면? 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 key가 없을때보다 성능이 저하 된다. 

 

 

📝 Key 설정

key 값은 컴포넌트 props를 설정하듯 설정하면 된다. 그런데 key 값은 언제나 유일해야 하며, 따라서 데이터가 가진 고윳값을 key 값으로 설정해야 한다. 

 

위 예제 컴포넌트에는 고유 번호가 없기 때문에 콜백 함수의 인수인 index 값을 사용할 수 있다. 

 

import React from 'react'; 

const Iterationsample = () => {
	const names = ['눈사람', '얼음', '눈', '바람'];
    const nameList = names.map((name, index) => <li key={index}>{name}</li>);
    
    return <ul>{nameList}</ul>;
};

export default IterationSample;

하지만 항목의 순서가 바뀔 수 있는 경우 key에 index를 사용하는 것을 권장하지 않는다. 렌더링한 항목에 대한 안정적인 ID가 없을 때, 최후의 수단으로 index를 key로 사용할 것!