[React] 컴포넌트 반복

컴포넌트 반복

리액트의 반복

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)