react map

1. Map() 함수 기본 사용법

map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다.

 

2. Map 함수의 형태

arr.map(callback, [thisArg])

 

import React from 'react';

const App = () => {

    const arr = [1, 3, 5, 7, 9];

    const result = arr.map((v, i) => {
      console.log(i);
    });

    return (
        <div>

        </div>
    )
}

export default App

배열의 길이만큼 console이 찍혔다.

import React from 'react';

const App = () => {

  const names = ['test1', 'test2', 'test3', 'test4'];
  const nameList = names.map(name => <li>{name}</li>);

    return (
        <div>
          <ul>
            {nameList}
          </ul>
        </div>
    )
}

export default App

위 코드 실행 결과