[React] 5. 반복되는 부분 축약하기 (map)

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

 

 

html 작성시 어떠한 부분에서 템플릿이 반복되는 경우가 있다.

이러한 반복을 효과적으로 줄이는 방법을 알아보자.

 

1. map 알아보기

들어가기 전에 map함수에 대해서 알아보자.

array 자료형에 사용할 수 있는 메서드이고 그 활용법은 아래와 같다.

 

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

arr.map((요소)=>{ ... })
arr.map((요소, 인덱스)=>{ ... })


arr.map(콜백함수)
arr.map(콜백함수, thisArg)

arr.map(function(요소){ ... })
arr.map(function(요소, 인덱스){ ... })

// ...etc

콜백함수로 화살표 함수, function 모두 사용할 수 있다.

 

기능

1. array 내 요소 들에 대해 각각 콜백함수를 호출한다. (즉, 요소의 개수만큼 실행)

2. 콜백함수의 매개변수를 통해 array의 각 요소를 넘겨줄 수 있다.

3. return 할 경우 각 요소들에 대한 처러 후, 그 값들을 모아서 array의 형태로 반환한다.

 

 

예시

let arr = [1, 2, 3];

arr.map(function(){
  console.log('A');
});

>>> A
>>> A
>>> A

 

let arr = [1, 2, 3];

arr.map(function(element){
  console.log(element);
});

>>> 1
>>> 2
>>> 3

 

let arr = [1, 2, 3];

let arr2 = arr.map(function(element){
  return element*10;
});
console.log(arr2);

>>> [10, 20, 30]

 

 

2. map 활용하기

위에서 알아본 map()을 활용하여 반복되는 코드를 축약해보자.

...

{
  Array.map(function(){
    return(
    
      ... // 반복되는 html 블록
      
    )
  })
}

...

이러한 형태로 삽입한다.

 

 

예시

{
  music.map(function(a, i){ //a는 요소, i는 인덱스
    return(
      <div className="music-list" key={i} onClick={()=>{modal === 'closed' ? setModal('open'):setModal('closed')}}>
        <div className="music-type">
          <img className="music-type-img" src={setTypeImg(music[i].type)} alt="" />
          <span className="music-type-desc">
          {music[i].type}
          </span>
        </div>
        <div className="music-info-container">
          <div className="music-info">
            <h3 className="music-title">{music[i].title}</h3>
            <span className="music-singer">{music[i].singer}</span>
          </div>
          <div className="music-others-container">
            <div className="music-thumbs-container">
              <div className="thumbs">
                <span onClick={()=>{
                  updateThumbs(i);
                  }}>👍 좋아요</span>
              </div>
              <span>{music[i].thumbs}</span>
            </div>
            <div className="music-stream-container">
              <a href="."><img src={youtube} alt="" /></a>
              <a href="."><img src={spotify} alt="" /></a>
              <a href="."><img src={apple} alt="" /></a>
            </div>
          </div>
        </div>
      </div>
    )
  })
}

 

콜백함수에 매개변수를 지정하면

위처럼 배열 내 각각의 요소와 인덱스를 함수 내에서 활용할 수 있다.

 

※ 주의할 점 !

<div className="music-list" key={i} ... >

map()으로 반복시킬 블록에 key={ i } 와 같은 형태의

키 속성을 추가해주어야한다.

이를 통해서 React가 각각의 div들을 구분하도록 할 수 있다.

 

 

---

- 만약 for문을 활용하고 싶은 경우

for문은 JSX 안에서 사용할 수 없다. 따라서 return() 밖에서 작성해주어야한다.

 

단계
1. html 블록 담을 array 생성
2. for문을 통해 array에 html블록 push
3. 삽입할 위치에 { array }

 

예시

function App() {
  let arr = [];
  for (let i=0; i<5; i++){
    arr.push(추가할 html 블록)
  }
  return(
    <>
      { arr }
    </>
  )
}