<React> Map, filter

React로 프론트엔드 개발을 하다 보면 배열을 다루는 일이 정말 많습니다. 리스트를 렌더링하거나, 조건에 맞는 데이터만 보여주거나, 사용자 입력값을 받아 화면에 반영하는 모든 과정이 결국 배열 처리와 상태 관리로 이어집니다.

 

이번 글에서는 React 개발자라면 반드시 알아야 할 Array.map()과 filter() 메소드의 문법과 장점, 그리고 useState를 활용한 조건부 렌더링 및 input 처리 방법까지 정리해 보겠습니다.

---

📘 React에서 Map, filter 그리고 input 상태 관리까지 한 번에 끝내기

1. Array.map() — 배열을 컴포넌트로 바꾸기

• React에서 가장 자주 쓰이는 배열 메소드 중 하나는 map()입니다.
• 주어진 배열의 각 요소를 새로운 요소로 변환할 수 있기 때문입니다.
• 흔히 리스트 렌더링에 사용됩니다.

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

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

 

map()을 사용할 때의 장점

• 깔끔한 코드 : 반복문 없이 선언형 코드로 리스트를 만들 수 있다.
• 동적 UI 생성 : 서버에서 받아온 배열 데이터를 손쉽게 컴포넌트로 변환 가능
• 재사용성 증가 : map 내부에 컴포넌트를 활용하면 구조를 쉽게 바꿀 수 있음

 

 

2. Array.filter() — 조건에 맞는 요소만 렌더링

• React에서는 사용자 입력을 다루기 위해 useState를 자주 사용합니다.
• 이를 통해 input 값 상태를 저장하고, 입력값에 따라 화면을 동적으로 바꿀 수 있습니다.

input 값 상태 가져오기

import { useState } from 'react';

function InputExample() {
  const [name, setName] = useState('');

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>입력한 이름: {name}</p>
    </div>
  );
}

• 이 코드의 흐름
  1. useState('')로 name 상태를 초기화
  2. input의 value와 상태를 바인딩
  3. onChange 이벤트로 입력값이 바뀔 때 상태 업데이트
  4. <p> 태그에서 즉시 출력 (자동 렌더링)

입력값에 따라 조건부로 리스트 보여주기 (map + filter + input)

• 이제 앞서 배운 내용을 모두 합쳐서, 사용자가 입력한 키워드로 리스트를 필터링하고, 그 결과를 렌더링하는 예제를 만들어보겠습니다.

import { useState } from 'react';

const books = [
  { id: 1, title: 'React for Beginners' },
  { id: 2, title: 'Learning JavaScript' },
  { id: 3, title: 'Advanced React Patterns' },
];

function BookSearch() {
  const [query, setQuery] = useState('');

  const filteredBooks = books.filter(book =>
    book.title.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="책 제목 검색"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredBooks.map(book => (
          <li key={book.id}>{book.title}</li>
        ))}
      </ul>
    </div>
  );
}

• 이 예제에서 배울 수 있는 것
  1. input으로 사용자 입력을 받고
  2. filter()로 리스트를 조건에 맞게 걸러내고
  3. map()으로 조건을 만족하는 리스트만 렌더링합니다.

 

💡 이 모든 과정을 선언형 코드로 깔끔하게 처리할 수 있는 것이 React + map/filter + useState의 진짜 강점입니다.