React 배열 데이터 가공 - map,find,findindex,filter (1)

리액트에서 데이터를 가공할 때, 특히 배열에서 많이 사용하는 자바스크립트 함수에 대해 알아두면 도움이 되어 1, 2편 나눠서 정리해 봅니다.  실제 예시를 기반으로 어떻에 활용하는지 실제 개발하는데 도움이 되었으면 합니다.

 

이번 포스팅에서는 map, find, findindex, filter 에 대해 알아 보겠습니다.

 

1.  map()

JSX 문법을 사용하는 리액트에서는 배열로 된 데이터를 가공하는데 for문 대신 map() 을 사용합니다.

실사용에서 제일 많이 사용하는 함수로 사용하는데 주의점이 있습니다.

 

JSX에서 자바스크리립트 구문은 { } 사이에 사용합니다. 

{items.map((item) => <li>item</li>)}

 

상기 예시는 items 배열에 있는 항목 하나씩(item) 꺼내서 리스트로 표출하는 예시로 기본적인 사항입니다.

 

 아래 예시는 장바구니(cart)에 구매할 제품을 등록하고 조회하는 화면에서 장바구니에 등록한 항목들을 표출하는 화면입니다.

Cart component

const Cart = (props) => {
  const cartItems = useSelector((state) => state.cart.items);
  return (
    <Card className={classes.cart}>
      <h2>Your Shopping Cart</h2>
      <ul>
        {cartItems.map((item) => (
          <CartItem
            item={{
              id: item.id,
              title: item.name,
              quantity: item.quantity,
              total: item.totalPrice,
              price: item.price,
            }}
          />
        ))}
      </ul>
    </Card>
  );

 

 

 

상기 코드를 실행시 장바구니에 담긴 3개 쇼핑항목이 정상적으로 표출되는데 콘솔화면에는 위와 같이 warning 문구가 나타납니다.

경고 내용은 각 리스트 값은 unique key 값이 필요하는 것 입니다.

이것은 리액트 특성에 따라 필요한 값으로 장바구니에 쇼핑항목이 추가되거나 삭제되어 데이터 변경이 일아날 경우 화면을 다시 rendering하게 되는데 이 때 실제 값이 변경되었는지 판단을 unique key 로 하게 됩니다.

특히 배열의 값이 동일한 값을 가질 경우라도 구분을 위해서는 구분을 위한 key 값이 필요합니다.

다음과 같이 일반 배열의 경우와 객체 배열의 경우를 구분하여 설명하겠습니다.

 

• 일반적인 배열 : 데이터 만으로 구분할 수 없기 때문에 항목별 key는 index 로 대응
  • {items.map((item, idx) => <li key=idx>item</li> )}
• 객체 배열 : 데이터 항목에 데이터 구분할 수 있는 id 값을 지정 (상기 cart component 참조)
  • key={item.id}  추가

        {cartItems.map((item) => (
          <CartItem
            key={item.id}
            item={{
              id: item.id,
              title: item.name,
              quantity: item.quantity,
              total: item.totalPrice,
              price: item.price,
            }}
          />
        ))}

상기와 같이 map 함수로 데이터를 다른 컴포넌트의 props로 넘길 때도 key 를 지정해줘야 합니다.

 

2.  find() / findindex()

배열내에서 조건식을 만족하는 값(find) 과 인덱스(findindex)를 찾아올 때 사용합니다.

• items.find(item => item.name === 'My First Book' )
  • 쇼핑 카트내 항목중 item 이름이 My First Book 인 item 객체를 찾음
  • 만약 찾는 값에 해당 되는 price를 찾는다면 뒤에 객체의 key를 붙여줌
  • items.find(item => item.name === 'My First Book' ).price
• items.findindex(item => item.name === 'My First Book' )
  • 쇼핑 카트내 항목중 item 이름이 My First Book 인 item 객체의 index 값을 찾음
  • 만약 index값이 '0' 이면 items[0].name 을 사용하면 My First Book이 나옴

3.  filter()

배열 데이터중 조건을 통과하는 데이터만 새로운 배열로 반환합니다.

조건은 true 면 데이터를 유지하고, false 면 버리기 때문에 false에 해당되는 데이터를 삭제할 때 사용합니다.

 

• const priceHigh = items.filter(item => item.price > 5)
  • 쇼핑 장바구니내 항목중 가격이 $5 이상인 항목만 보여줄 때 사용하며 새로운 배열을 생성
• const newItem = items.filter(item => item.id !== 1)
  • 쇼핑 장바구니에서 특정 데이터만 삭제할 때 사용하는데 id = 1 인 데이터를 삭제한 새로운 배열을 생성

기본적인 함수를 잘 사용하면 필요한 데이터를 가공하는데 도움이 됩니다.

 

다음 포스트에서는 reduce, concat, slice, splice 에 대해 알아 보겠습니다.