[React] map()을 활용한 반복

A. JS map() 함수

A-1. array 자료 갯수만큼 함수안의 코드 실행해줍니다.

A-2. 함수의 파라미터는 array안에 있던 자료입니다.

A-3. return에 값을 적으면 array에 담아줍니다.

//1
[1, 2, 3].map(function(1){
    console.log(1)
})
// 1 1 1 출력

//2
[1, 2, 3].map(function(a){
    console.log(a)
})
// a에array안에 있던 자료 담겨서 출력
// 1 2 3 출력

//3
[1, 2, 3].map(function(){
    return 'qqqqq'
})
// return안에 있는 거 array에 담아줌
// qqqqq, qqqqq, qqqqq 출력

B. React에서 반복문 쓰기

반복문하면 for, while이 생각나지만 React의 html 사이에 있는 중괄호에선 for, while을 쓸 수 없고 map()함수를 사용한다.

{
    [1, 2, 3, 4].map(function(){
        return <div>hello world</div>
    })

}
// 위와 같이 작성하면
{
    [<div>hello world</div>, <div>hello world</div>, <div>hello world</div>, <div>hello world</div>]
}
// 이렇게 <div>hello world</div>가 4개가 있는 array가 남아있다.
// 리액트는 이렇게 array안에 html 담아놔도 잘 보여준다.

map()을 활용하여 데이터만큼 html 생성하기

import './App.css';
import { useState } from 'react';

function App() {

  let [title, b] = useState(['오늘 점심 추천', '오늘 저녁 추천', '내일 아침 추천']);

  return (
    <div className="App"> 
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      {
        title.map(function(title, i){
          return (
            <div className='list'>
              <h4>{title}</h4>
              <p>2월 17일 발행</p>
                            <p>{ i }</p>
            </div>
          )
        })
      }
    </div>
  );
}

export default App;