리액트 입문기 - 컴포넌트 반복

반복되는 코드를 작성할 때 map함수를 사용하여 컴포넌트를 렌더링 할 수 있습니다.

* map문법

arr.map(callback, [ thisArg ]);

* map문법 예제

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

key 설정

key는 컴포턴트 배열을 렌더링 했을때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.

* key설정
key값을 설정할때는 map함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 됩니다.

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;

고유한 값이 없을 때만 index를 키 값으로 설정합니다.