HS LabMVP read-only

React

React 상태와 리스트 필터링

useState로 필터 상태를 관리하고 파생 데이터를 안전하게 렌더링합니다.

React 상태와 리스트 필터링

카드 필터 UI는 원본 데이터와 선택된 필터 상태를 분리하는 것이 중요합니다. 원본 배열은 유지하고, 화면에 보여줄 목록만 계산합니다.

기본 흐름

1. 전체 카드 데이터를 준비합니다. 2. 선택된 카테고리를 `useState`로 저장합니다. 3. 선택값에 따라 `filteredItems`를 계산합니다. 4. 사용자가 필터를 바꾸면 화면만 다시 렌더링합니다.

체크포인트

  • 원본 배열을 직접 수정하지 않습니다.
  • `All` 상태를 별도로 둡니다.
  • 필터 버튼의 현재 상태를 시각적으로 표시합니다.
ReactStateFiltering