[React.js] Filter 함수

배열에서 특정 조건에 해당하는 요소만 새로운 배열로 만들어주는 filter 함수를 배우다.

---

1. filter 함수 설명

filter 함수 설명 (그림 1)

 filter함수는 map함수와 동일하게 배열에 사용할 수 있는 함수이다. map처럼 배열 내 요소들을 하나씩 함수 내 콜백함수를 거치게 하는데, map과는 다르게 filter함수는 조건을 걸어서 해당 조건을 만족하는 배열 내 요소들만 추출해서 새로운 배열을 반환한다. 

 

 

1 - 1. map과 filter의 차이

members 배열 형태 (그림 2)

    let new_array = members.map((member) => member.task === "Front-end")
    console.log(new_array);

    let age_27 = members.filter((member) => member.age < 27)
    console.log(age_27);

map 함수 결과 (그림 3)

 map 함수와 filter함수의 결과 차이를 콘솔로 확인해 보겠다. new_array 배열의 결과가 그림 2와 같다. new_array는 members의 각 요소의 task의 value가 "Front-end"인 사람만 충족하게 만든 코드이다. map함수로 조건문을 걸어서 새로운 배열을 반환받고 콘솔로 확인해보면 조건문에 충족한 것은 true, 불충족한 것은 false로 새로운 요소로, 새로운 배열을 반환한다. 하지만 우리가 원하는 것은 true로 되는 것들만 새로운 배열로 반환되게 하고 싶다. 그리고 true, false가 아닌 그 배열의 요소, 지금은 객체형태가 새로운 배열의 요소가 되어야 한다.  filter 함수의 결과를 확인하고 map 함수와 비교하겠다. 

 

filter 함수 결과 (그림 4)

 filter 함수의 결과이다. 코드 블럭에서는 age_27 배열의 결과이다. map 함수의 결과(그림 2)와는 다르게 새로운 배열의 요소가 true, false가 아닌 원래 형태인 객체 형태로 나온다. 그리고 조건의 결과가 false로 나오는 요소들은 새로운 배열에 포함되지 않는다. 이것들이 map함수와 filter함수와의 차이점이다.

---

2. 필터링 실습

import React, { useState } from 'react'
import pokemonData from "../data/pokemon.json"
import PokeNav from './PokeNav'
import PokeList from './PokeList'
const PokeBoard = () => {

  const [pokemons, setPokemons] = useState(pokemonData)

  const onClick = (e) => { 
    console.log(e.target.innerText);
    let click = e.target.innerText

    let filter = [];

    if(click === "All"){
      setPokemons(pokemonData)
    }
    else{
      if(click === "1~50"){
        filter = pokemonData.filter((item) => 1 <= item.id && item.id <= 50)
      }
      else if (click === "51~100"){
        filter = pokemonData.filter((item) => 51 <= item.id && item.id <= 100)
      }
      else{
        filter = pokemonData.filter((item) => 101 <= item.id && item.id <= 151)
      }
      setPokemons(filter)
    }

  }

  return (
    <div>
      {/* 메뉴 영역 */}
      <PokeNav onClick={onClick}/>
      {/* 포켓몬 정보를 보여주는 영역 */}
      <PokeList pokemons={pokemons}/>
    </div>
  )
}

export default PokeBoard

네비게이션 바 (그림 5)

 해당 코드는 네비게이션 바(그림 4)의 각 필터를 클릭하면 해당 범위 내의 번호를 가진 포켓몬 카드만 보이게 하는 기능을 가지고 있다.

  const onClick = (e) => { 
    console.log(e.target.innerText);
    let click = e.target.innerText }

 onClick 함수의 e.target.innerText 부분이 사용자가 어떤 것을 클릭했는지 알 수 있게 해 준다. 만약 All을 클릭했다면 콘솔로 찍었을 때 문자형으로 "All"이 나온다. 이것을 가지고 조건문 로직을 지나게 하여 해당 조건에 맞는 요소들을 새로운 배열에 넣고 그 배열을 미리 만들어둔 filter 배열에 넣어둔다. filter 빈 배열을 만든 이유는 이 배열을 state의 변하는 값으로 주기 위해서, setPokemons 함수로 state를 변경하기 위해서이다. state를 변경하면 화면에서 바로 포켓몬 카드들이 필터링되는 것을 볼 수 있다. 

51~100 눌렀을 때 결과 (그림 6)

51 ~ 100을 눌렀기 때문에 가장 상단에 첫번째로 오는 것은 51번 포켓몬인 닥트리오이다.