리액트 API 리스트를 이용한 배열 값 검색 기능

 

현재 상단에는 검색 기능, 하단에는 api를 통해 카테고리 리스트를 불러오고 있다.

지금은 카테고리 갯수가 많이 없어서 상관 없지만, 갯수가 많아 진다면 관리하기 어려울 것 같아 리스트 검색 기능을 추가했다.

 

구현 방법

1. input value값을 변수 값에 담는다.

const [searchValue, setSearchValue] = useState('');
// input 값 변경
const onChangeInput = (e) => {
    setSearchValue(e.target.value)
}

<input type='text' className='flex-grow-1 w-auto mb-3 me-2'
    value={searchValue}
    onChange={onChangeInput}
/>

 

2. api 리스트를 불러온 후 map과 filter 함수를 이용하여 변수 값이 포함된 리스트만 호출한다.

const [searchList, setSearchList] = useState([]); // 검색 된 리스트
const searchApi = async () => { 
    try {
        const data = await apiList(); // API 호출
        const searchedList = data.list // 검색 될 리스트
            .filter(item => {
                return item.category_name && item.category_name.includes(searchValue);
            });
        if(searchedList.length > 0){ // 검색될 리스트가 있다면
            setSearchList(searchedList) // set을 통해 리스트에 새로 추가한다.
        }
    } catch (error) {
        console.error(`Error list:`, error);
    }
}

 

3. useEffect를 이용하여 input value 값이 변경 될 때 마다 실행시켜 리스트를 동적으로 표현한다.

 // 검색 값 변동 시 마다 검색
useEffect(() => {
    const searchApi = async () => {
        try {
            const data = await apiList();
            const searchedList = data.list
                .filter(item => {
                    return item.category_name && item.category_name.includes(searchValue);
                });
            if(searchedList.length > 0){
                setSearchList(searchedList)
            }
        } catch (error) {
            console.error(`Error list:`, error);
        }
    }
    searchApi()
}, [searchValue])

 

4. 변수에 담긴 searchList를 map을 통해 나열해준다.

{
    searchList.map((item, index) => (
        <div key={index} className='row align-items-center justify-content-between td p-0 m-0'>
            <div className='text-center col-5'>{item.category_name}</div> // 카테고리 이름
            <div className='text-center col-5'>{item.category_price}₩</div> // 카테고리 가격
        </div>
    ))
}

 

이렇게 해서 구현을 했었는데.. 같이 프로젝트를 진행 중인 백엔드 분 말로는 해당 작업으로 리스트를 검색 할 시 시간이 너무 오래 걸린다고 말해주셨다..

  => 바로 10개 중에서 단어가 맞는 지 검색 하는 데엔 오래 걸리지 않지만, 10000개에서 검색 하는 데엔 1개씩 찾아야 하니 느려지는 것...

 

그래서 다른 방법인 api 의 자체 검색 필드를 이용하여 검색하는 방법을 구현 할 예정이다!

 

2024.08.02 - [Develope/REACT] - 리액트 - API 기능을 이용한 리스트 검색

리액트 - API 기능을 이용한 리스트 검색

 

와 생각보다..엄청 쉽다.

괜히 어렵게 했나보다... 하지만 저런 방법도 해봤으니 다음엔 선택지가 더 넓어지겠지!!