React 기초) 반복되는 html요소들을 줄이고 싶을때는 map

리액트 map 사용

 

0. map() 요약

1) 왼쪽 array 자료만큼 내부코드 실행해줌

2) return 오른쪽에 있는걸 array로 담아줌

3) 유용한 파라미터 2개 사용가능(map 안의 요소 데이터, 인덱스)

1. HTML 요소가 반복되고 있는 계획표가 있다.

//App.js
/*eslint-disable*/
import {useState} from 'react'
import style from './App.css'

function App() {

  let [날짜,날짜변경] = useState(['22일','23일','24일'])
  let [계획,계획변경] = useState(['빨래하기','청소하기','공부하기'])
  return (
    <div className="App">
      <ul className="content">
        <h1>11월 {날짜[0]} 일정</h1>
        <li>밥먹기</li>
        <li>운동하기</li>
        <li className="content-plan">{계획[0]}</li>
      </ul>
      <ul className="content">
        <h1>11월 {날짜[1]} 일정</h1>
        <li>밥먹기</li>
        <li>운동하기</li>
        <li className="content-plan">{계획[1]}</li>
      </ul>
      <ul className="content">
        <h1>11월 {날짜[2]} 일정</h1>
        <li>밥먹기</li>
        <li>운동하기</li>
        <li className="content-plan">{계획[2]}</li>
      </ul>
    </div>
  );
}
export default App;

이 div가 100개라면...? 일일히 태그를 계속 만들수도 없다. 

 

2. 반복되고 있는 HTML 요소를 줄이고 싶을때 map 을쓴다

 

- map 의 사용예시

모든 array 자료에는 map() 메서드를 붙일수있다.

map은 인자로 콜백함수가 들어온다.

 

1) 배열에 들어있는 자료 갯수만큼 코드를 반복실행해줌

 

2) 콜백함수에의 첫번째 파라미터 아무렇게나 작명하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력

콜백함수의 두번째 파라미터로는 인덱스가 나온다.

 

 

3) 새로운 변수에 담으면 return 한 값을 새로운 배열에 담을수있다.

 

 

2-1) map을 활용한 리액트 코드 예시

 

- useState값과 map을 써서 코드 단 몇줄로 위 예제코드와 똑같이 구현할수있다.

- useState의 날짜와 계획은 모두 배열로 이루어져있다. 따라서, map 메서드를 써서 반복을 끌어낼수있다.

- 중괄호{} 안에 map을 사용하고, 콜백함수 안의 return 값으로 반복하고 싶은 html태그들을 넣는다.

- 날짜, 계획의 배열을 모두 순회해야하니 index값으로 순서들을 모두 표현해준다.

 

//App.js

/*eslint-disable*/
import {useState} from 'react'
import style from './App.css'

function App() {

  let [날짜,날짜변경] = useState(['22일','23일','24일'])
  let [계획,계획변경] = useState(['빨래하기','청소하기','공부하기'])
  return (
    <div className="App">
      {
        날짜.map((data,i)=>{
          return(
            <ul className="content">
            <h1>11월 {날짜[i]} 일정</h1>
            <li>밥먹기</li>
            <li>운동하기</li>
            <li className="content-plan">{계획[i]}</li>
          </ul> 
          )
        })
      }
    </div>
  );
}
export default App;