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

처음 구현한 방법은 리스트 배열을 map과 filter를 사용해서 input value 값을 includes로 필터링하여 남는 리스트만 호출 하는 방식으로 했었는데, api의 파라미터를 이용하면 훨씬!!! 쉽게 할 수 있었다.

 

기존 코드

 // 검색 값 변동 시 마다 검색
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])

 

2. 새로운 방법

// api list 호출
    const apiList = async () => {
        const url = '/getList';
        const param = {
            sfield : 'category_name',
            skeyword : searchValue
        }
        const response = await axios.get(url, {
            params: param,
            headers: {
                'Authorization': `Bearer ${accessToken}`
            }
        });
        return response.data;
    };

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

 

호출 함수에 

const param = {
    sfield : 'category_name',
    skeyword : searchValue
}

파라미터를 추가하여 get으로 호출 시 category_name에 searchValue가 포함된 리스트만 호출 한다.