[React] 4일차: 배열 메서드(map, filter)로 동적 리스트 렌더링하기

리액트 개발에서 가장 많이 하는 작업 중 하나는 서버에서 가져온 데이터(배열)를 화면에 리스트 형태로 보여주는 것입니다.

오늘은 자바스크립트의 배열 메서드인 map()과 filter()를 리액트에서 어떻게 활용하는지 정리해 보겠습니다.

1. map() 메서드로 리스트 렌더링하기

map()은 배열의 각 요소를 돌면서 새로운 형태(JSX)로 변환해 주는 역할을 합니다. 리액트에서는 반복되는 UI를 만들 때 필수적으로 사용됩니다.

• 기본 사용법:
• JavaScript

   

  const users = ["Ryon", "Alice", "Bob"];
  
  function UserList() {
    return (
      <ul>
        {users.map((user, index) => (
          <li key={index}>{user}</li>
        ))}
      </ul>
    );
  }
  

2. 반드시 기억해야 할 'key' Prop

map()을 사용할 때 리액트는 각 요소에 고유한 key 값을 요구합니다.

• 이유: 리액트의 가상 DOM은 어떤 원소가 변경, 추가, 삭제되었는지 식별하기 위해 key를 사용합니다. key가 있어야만 변경된 부분만 효율적으로 업데이트할 수 있습니다.
• 주의: 배열의 index를 key로 쓰는 것은 권장되지 않습니다(데이터 순서가 바뀔 때 버그 발생 가능). 가급적 데이터의 고유 ID를 사용하세요.

3. filter() 메서드로 데이터 필터링하기

filter()는 조건에 맞는 요소만 골라내어 새로운 배열을 만듭니다. 리액트에서는 특정 아이템을 삭제하거나, 검색 결과만 보여줄 때 주로 사용합니다.

• 삭제 기능 구현 예시:
• JavaScript

   

  const [items, setItems] = useState([
    { id: 1, text: "리액트 공부하기" },
    { id: 2, text: "블로그 포스팅하기" }
  ]);
  
  const onDelete = (id) => {
    // 클릭한 id와 다른 아이템들만 남김 (삭제 효과)
    setItems(items.filter(item => item.id !== id));
  };
  

오늘 학습의 핵심 요약

1. map(): 배열 데이터를 JSX 태그로 변환할 때 사용.
2. filter(): 데이터 삭제나 조건 검색 UI를 만들 때 사용.
3. key: 효율적인 렌더링을 위해 반드시 고유한 값을 할당할 것.

Copyright 2026. [Ryon] all rights reserved.