[리액트 React] map() / map() 으로 element 반환하기

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

리액트로 개발할 때 map으로 element 반환하는 방법에 대해 공유할게요.

이 방법을 통해 코드를 최소화 할 수 있답니다.

 

1.  App.js 작성하기

import React from 'react';
import './App.css';
import Map from './Map';

function App() {
	return(
		<div>
			<Map />
		</div>
	)
}

export default App;

 

 

 

2-1. Class형 컴포넌트로 Map.js 작성하기

import React, { Component } from "react";

class Map extends Component {
    render() {
        const element_Array = [
            <li>나도</li>,
            <li>리액트</li>,
            <li>할 수 있다</li>
        ]
        return (
            <ul>
                {element_Array.map((array_val) => array_val)}
            </ul>
        )
    }
}

export default Map;

 

 

 

2-2. 함수형 컴포넌트로 Map.js 작성하기

import React from "react";

function R033_ReturnMap() {
    const element_Array = [
        <li>나도</li>,
        <li>리액트</li>,
        <li>할 수 있다</li>
    ]
    return (
        <ul>
            {element_Array.map((array_val) => array_val)}
        </ul>
    )
}

export default R033_ReturnMap;

 

 

 

3. 브라우저 확인