[React] map - 반복문 함수

Java나 Javascript의 for , forEach와 유사한 기능을 가진 반복문 함수다.

React 실무 개발환경에서 return 구문에 for , forEach문을 사용해봤는데..

아니나 다를까 안된다. 그래서 React에 설치돼있던 TypeScript를 이용해서 for문을 돌리려다가

"이럴거면 React를 왜쓰지.." 라는 의문심이 들어 React 개발자에게 물어봤더니 역시나 map을 사용한다더라.

아래 예제 소스코드처럼 사용하면 됐었다.

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;

 

<ul>
	<li>Menu1</li>
	<li>Menu2</li>
	<li>Menu3</li>
	<li>Menu4</li>
</ul>