[React] map함수

동일하게 여러번 쓰이는 Modal들을 내가 원하는 횟수만큼 반복시키고 싶다.

특히 배열로 받은 데이터들에 대응하는 수만큼 모달을 만들어 출력하고 싶다.

 

이를 해결해주는 map 함수의 사용법을 알아보자

 

map 함수 사용법

let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']);

[0,1,2].map(function(a){
  return(
    <div className="list">
      <h4>{글제목[a]}</h4>
    </div>
  )
})

function 파라미터인 a는 앞의 배열에 속하는 원소 하나 하나를 차례대로 받아온다.

따라서 글제목[0], 글제목[1], 글제목[2]가 차례로 출력된다.

 

다음은 [0,1,2]라는 직접 입력한 배열 대신, 배열 형식의 state를 map 앞에 쓸 때의 예시이다.

글제목.map(function(a,i){
  return(
    <div className="list">
      <h4 onClick={()=>{setModal(!modal)}}>{a}
        <span onClick={()=>{
          let copy=[...따봉]
          copy[i]=따봉[i]+1
          따봉변경(copy)}}>👍</span>{따봉[i]}
      </h4>
      <p>2월 17일 발행</p>
    </div>
  )
})

a는 글제목의 원소인 '나_Hi','다_안녕하세요','가_채로입니다'를 차례로 받아오고,

i는 0부터 시작하여 문장이 반복될 때마다 1씩 증가하는 수를 반환시켜준다.

 

결과 화면

일일이 작성하여 출력했었던 글제목들이 map 함수를 통해 출력이 되고있다.

 

참고로 map 함수 내부에서 return은 map을 반복하면서 얻어낸 값들을 하나의 배열로 묶어 반환해주는

역할을 수행한다. 아래 코드를 예시로 들면

var newArray =[1,2,3].map(function(a){
    return a*10
})
console.log(newArray)

 

위와 같이 개발자모드(F12) Console에서, map에서 반환했던 값들을 하나의 배열로 묶어줬음을 확인할 수 있다.

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌