[React] 글 리스트 반복해서 만들기 - map( ) 함수/ 컴포넌트 반복

 

※ 사용하는 기본 map 문법

• 여기서 반복할데이터는 보통 배열명을 뜻한다.

let 반복할 데이터 = ['사자', '호랑이', '토끼'];

{반복할데이터.map(()⇒{ retrun(HTML)})}

1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인

import React, { useState } from 'react';

2. function App 안에 반복해서 나열할 리스트의 내용을 useState 배열로 작성

function App() {
**let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);**

 return(
 
    )})}

    </div>  
 )  
}

3. return 안에 map 을 사용하여 반복될 html 작성

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);

 return(
   <div>
  ** {글제목.map(()=>{return(
     <div className='list'>
       <div>글제목</div>
       <p>3월 28일</p> 
      </div>
    )})}**
    </div>  
 )  
}

4. 글제목이라는 배열명 안에 있는 내용들을 하나하나 나열하기 위해 연결

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);

 return(
   <div>
   {글제목.map((**a,i**)=>{return(
     <div className='list'>
       <div>**{글제목[i]}**</div>
       <p>3월 28일</p> 
      </div>
    )})}

    </div>  
 )  
}

5. 결과

import logo from './logo.svg';
import React, { useState } from 'react';
import './App.css';

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);

 return(
   <div>
   {글제목.map((a,i)=>{return(
     <div className='list'>
       <div>{글제목[i]}</div>
       <p>3월 28일</p> 
      </div>
    )})}
    </div>  
 )  
}

export default App;