[React.js] React.js의 map() 반복문

** 중괄호 안에서 if문을 쓸 때는 삼항연산자를 사용할 것.

** 중괄호 안에서 for문을 쓸 때는 map()를 사용할 것.

 

❗ map()

map() 함수는 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 

 

1. array 자료 갯수만큼 함수안의 코드를 실행 해준다.

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

2. 함수의 파라미터는 array안에 있던 자료이다.

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

3. return에 무언갈 적으면 array로 담아준다.

  [1,2,3].map(function(){
    return "test"
  })
  
  //["test", "test", "test"]

 

✔ 예제 1. 만약 포함된 제목 갯수만큼 div를 찍어내고 싶다면 ? 

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

function App() {

  let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']);

  let [logo, setlogo] = useState('React Blog');

  return (
    <div className="App">
      <div className="black-nav"> 
        <h4>{logo}</h4>
      </div>

    {
      제목1.map(function(value, index){
        return(
          <div className='list'>
          <h4>글 제목, {value} {제목1[index]}</h4>
          <p>2월 17일 발행</p>
        </div>
        )
      })
    }
    </div>
  );
  
}

export default App;

이렇게 하면 된다.

map 안에서 첫 번째 매개변수는 배열 안의 값들을 출력해주고 두 번째 매개변수는 배열의 인덱스를 순차적으로 출력해준다.

위 <h4>글 제목, {value} {제목1[index]}</h4> 태그 안에서의 {value}와 {제목1[index]}는 같은 결과물을 출력한다.