[React] React.js 강좌 10. map, slice, concat, spread 사용법

React map, slice, concat, spread 사용법

 

 

1. 기본적인 map() 사용법

map()함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다!

 

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map((num) => num *2);
console.log(result);

 

numbers.map 안에 (num)이라고 되어있는 부분이 있는데, 이거는 함수 내부에서 임의로 지정한 변수이기 때문에 아무렇게나 작성하셔도 됩니다!(알기 쉬운 data나 param 등등…) 

위 코드의 결과로는 각 요소의 2배인 값이 나옵니다!

 

 

 

 

 

2. 함수형 컴포넌트에서 map() 사용하기

이제 본격적으로 map을 사용해보는데, 함수형 컴포넌트에서 map을 사용해서 DOM 태그를 출력해보려고 합니다.

 

import { render } from '@testing-library/react'
import React, { Component } from 'react'
 
export default function MapTest(){
    const menus = ['menu1','menu2','menu3','menu4']
    const menuList = menus.map((data) => (<li>{data}</li>))
   
    return(
        <ul>
            {menuList}
        </ul>
    );  
}

 

 

위와 같이 menus 라는 배열을 만들고, 배열에 map을 호출해서 menuList에 <li>태그를 초기화 하도록 합니다. 

마지막으로 return 하는 부분에서 <ul>태그 밑에 JSX menuList를 작성하면

 

 

위와 같이 menus의 값이 출력됩니다!

 

 

가능하다면 map을 사용할 때 아래와 같이 Key를 같이 사용해주는 것이 좋습니다.

 

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

  

키는 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용해야 합니다.

 

리엑트에서는 컴포넌트를 렌더링 할 때, 어떤 원소가 변경되었는지 빠르게 감지하기 위해서 Key를 사용하는데, 만약 key가 설정되지 않았다면 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 key가 없을 때보다 속도가 느립니다.

이 Key값은 map() 함수를 호출할 때 인자로 넘기는 Callback 함수의 인자로 넘어오는 index 값을 사용하면 됩니다.

 

import { render } from '@testing-library/react'
import React, { Component } from 'react'

export default function MapTest(){
    const menus = [{key:1, value:'menu1'},
               {key:2, value:'menu2'},
               {key:3, value:'menu3'}];
    const menuList = menus.map((index, data) => (<li key={index}>{data}</li>))

    return(
        <ul>
            {menuList}
        </ul>
    );           
}

 

 

 

3. slice, filter

배열 데이터를 삭제할 때 slice와 filter를 사용하는데, 리엑트에서 주의해야할 점은 데이터의 불변성을 유지하면서 작업을 진행해야 합니다.

이때 사용되는 것이 slice와 filter입니다.

 

slice 사용 예 

const numbers = [1,2,3,4,5];
console.log(numbers.slice(0,2));
// [1,2] 기존의 배열은 건드리지 않습니다!

numbers.slice(0,2).concat(numbers.slice(3,5))
// [1,2] 먼저 slice의 결과물인 1,2과 출력되고, concat함수로 인해 뒤에 있는 데이터가 더해집니다.
// [1,2,4,5]

[
   …numbers.slice(0,2),
   10,
   …numbers.slice(3,5)
]
// [1,2,10,4,5]

 

 

filter 사용 예

const numbers = [1,2,3,4,5]
numbers.filter(n => n>3);
// [4,5] 필터로 인해 배열 내부의 값이 걸러집니다.
 
Numbers.filter(n => n !== 3);
// [1, 2, 4, 5]

  

 

 

 

 

4. spread 연산자

 

React 배열을 다룰 때 spread 연산자를 사용해서 배열의 값들을 초기화하거나 확장시킬 수 있습니다.

이제까지 사용한 배열과 관련된 함수를 적용하면 아래와 같이 사용할 수 있습니다.

 

const singerOne = ['청하', '여자아이들', '우주소녀']
const singerTwo = ['홍대광', '악동뮤지션', '볼빨간사춘기']
const combinedOne = singerOne.concat(singerTwo);

 

여기서 중간에 어떤 가수 이름을 추가하거나, concat이라는 함수를 사용하지 않고 spread 문법을 사용하면 아래와 같이 정리할 수 있습니다.combinedOne에는 청하,여자아이들,우주소녀,홍대광,악동뮤지션,볼빨간사춘기가 출력되겠죠.

 

 const combinedTwo = [...singerOne, 'BTS', ...singerTwo];
// 청하,여자아이들,우주소녀,BTS,홍대광,악동뮤지션,볼빨간사춘기가 출력된다.

 

위와 같이 배열을 확장을 할 수도 있고,

 

const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
// …rest를 출력하면 3,4,5,6이 출력된다.

 

위와 같이 초기화를 할 수도 있습니다. 

 

 

추가적으로 객체도 결합해서 사용할 수 있는데,

 

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}
 
const updateMyVehicle = {
  type: 'car',
  year: 2021,
  color: 'yellow'
}
 
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}
console.log(myUpdatedVehicle)

 

 

출력하면 위와 같은 결과가 나옵니다.