[React] 반복되는 컴포넌트 처리하기 / map( ), filter( )

 function App() {
    const testArr = ["감자", "고구마", "오이", "가지", "옥수수"];

    return (
      // 보다 더 깔끔한 html을 작성할 수 있다.
      <div className="app-style">
        <div className="component-style">감자</div>
        <div className="component-style">고구마</div>
        <div className="component-style">오이</div>
        <div className="component-style">가지</div>
        <div className="component-style">옥수수</div>
      </div>
    );
    }

앞서 만든 코드를 살펴보면, <div className="component-style">감자</div> 부분이 text 만 빼고 반복하고 있는 것을 알 수 있다.

 

1. map() 이용하여 반복되는 컴포넌트 처리하기

이를 map()을 이용하여 보다 깔끔하게 만들 수 있다.

✅ map() 은 배열 내 원래의 데이터를 가공하여 새로운 형태의 데이터로 출력하는 방법이다.
배열의 길이가 그대로 동일하게 출력된다.

testArr를 map을 이용하여 새로운 배열을 만들어 내는데, 그 배열은 <div className="component-style">{item}</div> 이 형태로 return 된다.

return (
    <div className="app-style">
      {testArr.map(function (item) {
        return <div className="component-style">{item}</div>;
      })}
);

▶️ map() 을 돌면서 배열의 길이만큼, 배열 내 데이터가 새로운 데이터로 다시 나온다.

 

화살표 함수로 나타내면 다음과 같다.

<div className="app-style">
      {testArr.map((item) => {
        return <div className="component-style">{item}</div>;
})}

 

2. filter() 이용하여 특정 컴포넌트만 나타내기

map을 이용하여 반복되는 컴포넌트를 정리 할 수 있었다면, filter를 이용해서는 원하는 특정 데이터만 뽑아서 사용할 수 있다.

우선 filter로 특정 데이터만 빼고 나타나도록 해보자.

<div className="app-style">
  {testArr.filter(function(item){
      return item !== "오이";
  })
}

▶️ "오이"를 제외한 데이터들만 배열 형태로 나오게 된다. // ["감자", "고구마", "가지", "옥수수"]

 

해당 배열을 다시 map 함수를 이용하여 카드 형태로 그려보면 다음과 같다.
=> testArr.filter().map()을 이용하였다.

<div className="app-style">
  {testArr.filter(function(item){
      return item !== "오이";
  })
  .map(function(item){
    return <div className="component-style">{item}</div>;
  })}

오이가 빠지고 특정 카드들만 나타나는 것을 알 수 있다.