컴포넌트 반복
리액트의 반복
JSTL의 <forEach>, AngularJS의 <ng-repeat>처럼 리액트에도 반복을 처리할 수 있는 방법이 있습니다.
리액트에서는 자바스크립트 배열 객체의 내장 함수인 map()함수를 이용합니다.
Map()
Map()
- 자바스크립트 배열 객체의 내장함수
- 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱 한 후 그 결과를 새로운 배열로 생성해주는 함수
형태
arr.map(callback, [thisArg])
callback
- currentValue: 현재 처리하고 있는 요소
- index : 현재 처리하고있는 요소의 index
- array : 현재 처리하고있는 원본 배열
thisArg(선택사항)
callback 함수 내부에서 사용할 this 레퍼런스
Key
- 리액트에서 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있는지 알아내려고 사용
- 단순히 출력만 하는 경우에는 Key가 필요하지 않지만, 게시판의 글을 수정, 삭제하는 등 고유 값이 필요한 경우에는 꼭 사용해야 합니다.
- props 설정과 유사
예제
아래 예제는 fruits 배열을 map함수를 이용해서 렌더링하는 예제입니다.
render() {
const fruits = ['사과','배','바나나','포도','수박'];
const fruitsList = fruits.map(
(fruit) => (<li>{fruit}</li>)
);
return (
<div>
<ul>
{fruitsList}
</ul>
</div>
);
}
동작 결과
정상적으로 렌더링 되지만, 아래와 같이 "key" prop이 없다는 경고가 뜨게 됩니다.
위의 예제에 Key를 추가하면 경고는 사라집니다.
index를 key로넘겨주면 index를 이용해서 쉽게 접근이 가능합니다.
const fruits = ['사과','배','바나나','포도','수박'];
const fruitsList = fruits.map(
(fruit,index) => (<li key={index}>{fruit}</li>)
);
참고 : 리액트를 다루는 기술(저:VELOPERT)
'언어 > ReactJS' 카테고리의 다른 글
| [React] 함수형 컴포넌트 (0) | 2019.05.21 |
|---|---|
| [React] 라이프 사이클 함수 (0) | 2019.05.07 |
| [React] Ref (0) | 2019.05.02 |
| [React] 이벤트 핸들링 (2) | 2019.04.25 |
| [React] State (0) | 2019.04.12 |