[React] map 함수 사용법

먼저 리액트 내부에서 같은 요소들을 반복해서 사용하고(반복문) 싶을 때 for문을 가장 먼저 떠올리기 쉽겠지만

우리가 잘 아는 JSX 문법 상에서는 {} 중괄호 안에 for 문이 작동하지 않는다. 물론 for문을 사용할 수 있는 방법이 있지만 오늘은 for문을 대체할 수 있는 map() 사용법에 대해서 공부를 해보았다.

 

var arr = [2,3,4];

arr.map(function(a){
  return a * 2
});

//결과 arr = [4,6,8]

 

위와 같이 먼저 arr이라는 배열은 선언을 해주고 map함수를 사용하여 콜백 함수를 사용해 a를 파라미터로 추가해주고 

리턴 값을 만들어 준다.

 

a라는 파라미터가 배열 안에 하나하나의 데이터라고 이해하면 쉽다.

 

---

본격적으로 map 함수를 사용해보도록 하자

 

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

function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천','하이','바이']);
  
  return (
    <div>
       <h3> { 글제목[0] } <span onClick={함수}>👍</span>{좋아요}</h3>
       <p>2월 17일 발행</p>
       <hr />
       <h3> { 글제목[1] }</h3>
       <p>2월 17일 발행</p>
       <hr />
       <h3 onClick={onModal}> { 글제목[2] }</h3>
       <p>2월 17일 발행</p>
       <hr />
     </div>
  );
}

 

다음과 같은 글들을 반복적으로 사용하고 싶다면 map 함수를 어떻게 사용하면 좋을까 

 

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

function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천','하이','바이']);
  
  return (
    <div>
       <h3> { 글제목[0] } <span onClick={함수}>👍</span>{좋아요}</h3>
       <p>2월 17일 발행</p>
       <hr />
       <h3> { 글제목[1] }</h3>
       <p>2월 17일 발행</p>
       <hr />
       <h3 onClick={onModal}> { 글제목[2] }</h3>
       <p>2월 17일 발행</p>
       <hr />
       
       //여기아래 맵함수 있어요!
         {글제목.map(function(){
       return(
       <div className='list'>
          <h3> { 글제목[1] }</h3>
         <p>2월 17일 발행</p>
         <hr />
       </div>
       );
     })}
     </div>
  );
}

 

위와 같이 중괄호 안에 맵함수를 입력해준다. 결과는 아래의 이미지를 참고하자

 

 

하지만 똑같은 글제목 배열 안의 1번째의 제목만 반복되는 것을 확인할 수 있다. 

이럴 때는 아래와 같이 파라미터를 설정하여 주면 된다.

 

//map 함수 부분만 잘라낸 것입니다.
{글제목.map(function(a){
       return(
       <div className='list'>
          <h3> { a }</h3>
         <p>2월 17일 발행</p>
         <hr />
       </div>
       );
     })}

결과 화면

 

위와 같이 원하는 대로 반복되는 부분을 구현할 수 있다.

정리하면 a 는 글 제목 안에 있던 하나하나의 데이터들을 의미한다. 그래서 배열이 각각 반복될 때마다

a 파라미터에 할당이 되는 것이다.

 

 

 

Ref.

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!