[React] Map과 Filter를 사용하여 배열 다루기

안녕하세요 황대성입니다😊

 

이번 글에서는 DeliveryHelper를 개발하면서 공부한

React에서 map과 filter 메서드를 사용하여 배열을 다루는 법을 알아보겠습니다.

---

일단 먼저 map메서드부터 알아보겠습니다.

 

map() 메서드는 배열 내의 모든 요소 각각에 대하여, 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

말로는 헷갈릴 수 있지만 예제를 보고 따라 하시면 확실하게 이해하실 수 있습니다.

 

 

이제 예시 코드를 봅시다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

코드를 보니까 굉장히 이해하기 쉽죠?

array1.map에서 x=> x * 2를 해줌으로써 map1은 array1의 2배되는 값을 가진 배열이 됩니다.

이걸 이제 React 실전에서 사용해봅시다.

import React from 'react';
import item from './component/item';

const array = [
  {
    id: 0,
    name: "index 0"
  },
  {
    id: 1,
    name: "index 1"
  },
  {
    id: 2,
    name: "index 2"
  },
  {
    id: 3,
    name: "index 3"
  }
];

const List = () => {
  return(
    <div>
      {
        array.map((data, index) => (
          <item
            key = {index}
            name = {data.name}
          />
        ))
      }
    </div>  
  );
}

export default List;

이렇게 사용할 수 있습니다.

 

위 코드를 얘기하자면 List.js에서 array를 item.js 컴포넌트로 넘겨주는 코드입니다.

 

위의 코드는 api에서 값을 받아오는 container와 그 결과값을 보여주는 presenter 패턴을 사용한다면 좋은 예시입니다.

---

이젠 filter메서드를 살펴봅시다.

 

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환합니다.

즉 filter() 메서드는 제가 원하는 값들을 필터링 할 수 있습니다.

 

JavaScript에서 filter()메서드를 사용하는 것을 봅시다.

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

이렇게 하면 filterItem함수를 통해 제가 원하는 query값이 들어간 단어를 필터링 할 수 있습니다.

 

프로젝트를 진행하면서 위의 코드를 따라 작성하니 오류가 발생했습니다.

그래서 구글링을 하면서 찾아보면서 해결방법을 알았습니다. 아래의 코드를 같이 봅시다.

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toString().toLowerCase().indexOf(query.toString().toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

toLowerCase()앞에 toString()을 붙여주면 됩니다.

---

사용하기 정말 쉬우니까 여러분도 사용해보세요!

 

참고 문헌 및 사이트

 

MDN web docs Array.prototype.filter()

MDN web docs Array.prototype.map()

ReactJS toLowerCase is not a function StackOverFlow

[JavaScript] map, reduce, filter를 유용하게 활용하는 15가지 방법

 

긴 글 읽어주셔서 감사합니다😀