본문 바로가기
Frontend/React

[React] map

by joy_95 2021. 8. 16.

1 map

배열 안의 모든 자료에 똑같은 작업을 하나씩 시켜주고 싶을 때 사용하는 내장 함수

 

import React from 'react';
import Header from '../layout/Header';
import Footer from '../layout/Footer';

function Info({text}){
    return(
            <div>{text}</div>
    )
}

const textInfo = [
    {text : "WE PROVIDE"},
    {text : "VISUAL CODING"},
    {text : "SOLUTIONS"},
    {text : "FOR YOU WEBS"}
]

function Main(){
    return(
        <div id="wrap">
            <Header/>
            <section id="mainCont">
               <div className="main__cont">
                   {textInfo.map((el) => (
                       <Info text={el.text}/>
                   ))}
               </div>
            </section>
            <Footer/>

        </div>
    );
}

export default Main;
반응형

'Frontend > React' 카테고리의 다른 글

[React] map 응용하기  (0) 2021.08.16
[React] 클래스형 컴포넌트  (0) 2021.08.16
[React] 객체 생성 및 객체 호출  (0) 2021.08.16
[React] props  (0) 2021.08.16
[React] 객체화 시키기 - Component  (0) 2021.08.16