[React] 리액트 - 배열 내장 함수 map을 통한 Component 반복
안녕하세요. 이번 포스팅에서는 배열 객체에 내장된 map() 함수를 통하여 반복되는 Component를 렌더링하는 방식에 대해서 알아보겠습니다.
1. map() 함수 기본 사용법
map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다. 아래 샘플 예제를 통해 사용법을 살펴보겠습니다.
const numbers = [1, 2, 3, 4, 5];
const result = numbers.map((num) => num *2);
console.log(result);
▼ numbers 배열 객체를 선언하고 [1, 2, 3, 4, 5]로 초기화하였습니다. map() 함수를 통해 배열 요소의 각 값에다가 *2한 결과를 return하고 있습니다. result 배열 객체에는 [2.4.6.8.10]의 결과값을 가지는 배열객체가 반환되게 됩니다.
2. Component 배열로 map하기
import React, { Component } from 'react';
import './MyComponent.css';
class MyComponent extends Component
{
render(){
return(
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
)
};
}
export default MyComponent;
▼ MyComponent는 <ul> 태그와 <li> 태그로 구성 된 요소를 반환하는 Component입니다. 그런데 <li> 태그의 경우는 반복적으로 나타나고 있습니다. 이를 map 함수를 통해 Component 배열 객체를 생성하여 간단하게 표현할 수 있습니다.
import React, { Component } from 'react';
import './MyComponent.css';
class MyComponent extends Component
{
render(){
const menus = ["Menu1", "Menu2", "Menu3", "Menu4"]
const menuList = menus.map((menu) => (<li>{menu}</li>));
return(
<ul>
{menuList}
</ul>
)
};
}
export default MyComponent;
▼ 먼저 데이터 배열 객체인 menus를 선언하고 초기화합니다. map() 함수를 통해 데이터 배열 객체의 각 요소를 출력값으로하는 <li>~</li> 코드로 된 새로운 배열을 생성하여 menuList에 담습니다. <ul>~</ul> 사이에는 {}안에 배열 객체 이름을 작성합니다. 이 상태에서 앱을 실행하면 "key" prop가 없다는 오류 메세지가 뜨는 것을 확인할 수 있습니다.
3. key 설정하기
리액트(React)에서는 컴포넌트를 렌더링 하였을 때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 사용됩니다. 만약 key가 설정되지 않았다면 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 key가 없을때보다 속도가 느립니다. 이러한 key 값은 map() 함수를 호출할 때 인자로 넘기는 Callback 함수의 인자로 넘어오는 index 값을 사용하면 됩니다.
import React, { Component } from 'react';
import './MyComponent.css';
class MyComponent extends Component
{
render(){
const menus = ["Menu1", "Menu2", "Menu3", "Menu4"]
const menuList = menus.map((menu, index) => (<li key={index}>{menu}</li>));
return(
<ul>
{menuList}
</ul>
)
};
}
export default MyComponent;
▼ Callback 함수로 넘어오는 인자로 index 인자값을 추가하였습니다. 요소에 key값을 설정하는 방식은 Component에 props를 설정하듯이 하면 됩니다.
출처 : https://lktprogrammer.tistory.com/121?category=744795
'JavaScript FrontEnd > React, Next.js' 카테고리의 다른 글
[React] 리액트 - 컴포넌트 생명 주기 (Component Life Cycle) (0) | 2021.12.13 |
---|---|
[React] 리액트 - 함수형 컴포넌트 (Functional Component) (0) | 2021.12.13 |
[React] 리액트 - 데이터가 변경하는 리액트 앱 만들기 예제 (0) | 2021.12.13 |
[React] 리액트 - 이벤트 처리하기 (0) | 2021.12.13 |
[React] 리액트 - state 사용하기 (0) | 2021.12.13 |
[React] 리액트 - props 사용하기 (0) | 2021.12.13 |
[REACT] 리액트 - 리액트의 주요 특징 (0) | 2021.12.13 |
[React] 리액트 - 컴포넌트 (Component) 생성하기 (0) | 2021.12.13 |