리액트 - 검색기능

1. 목표

사용자가 입력한 검색어에 따라 사전 항목을 필터링하여 화면에 보여준다.

2. 컴포넌트 구조

* DictionaryWrap
전체 사전 항목을 관리하고, 검색 기능과 페이징 기능을 포함

* SearchBox
사용자 입력을 받고, 검색어를 상위 컴포넌트인 DictionaryWrap으로 전달

3. 코드 흐름

1. 사용자가 SearchBox에서 검색어를 입력
2. 입력값이 변경되면 onChange 핸들러가 호출, inputValue 업데이트
   
   
3. 검색 버튼 클릭 시 onClick 핸들러가 실행, onSearch가 호출되고,
   

이는 DictionaryWrap의 handleSearch를 통해 검색어를 상태로 업데이트

4. DictionaryWrap에서 searchTitle에 기반하여 filteredItems를 계산하고, 현재 페이지에 표시할 항목을 결정
5. 최종적으로 필터링된 항목이 화면에 출력.

4. 주요 구성 요소

DictionaryWrap 컴포넌트

• 상태 관리 (state):
  • items: 사전 항목 데이터 배열.
  • currentPage: 현재 페이지 번호.
  • searchTitle: 사용자가 입력한 검색어.
    

• 데이터 불러오기:

  • useEffect 훅을 사용, db_new.json에서 데이터 부르기
  • 데이터 형식이 배열인지 확인 후, 상태 업데이트
    

• 검색 기능:

  • handleSearch: 검색어가 변경될 때 호출, searchTitle 업데이트
  • filteredItems: 입력된 검색어가 있는 경우, items를 필터링하여 검색된 항목만 포함

• 페이징 처리:

  • 현재 페이지에 해당하는 항목을 슬라이스하여 currentItems를 생성
  • 전체 항목 수를 기준으로 페이지 수를 계산하여 pageCount를 설정

SearchBox 컴포넌트

• 상태 관리:
  • inputValue: 사용자가 입력한 검색어를 저장
• 이벤트 핸들러:

  • onChange: 입력 필드의 값이 변경될 때 호출, inputValue 업데이트

  • onClick: 검색 버튼이 클릭될 때 호출, 상위 컴포넌트로 입력값을 전달