- Search 기능 구현 문제점 해결
1. 검색 버튼을 눌렀을 때 검색이 완료 된 이후에 다시 검색 버튼이 활성화 되어야하는데 활성화가 안됨.
2. "카페" 검색했을 때 2개밖에 안보여줌. 근데 다른 카페 이름을 검색해봤더니 그 카페는 또 나옴. "카페" 가 들어가있지만 "카페" 검색했을 때 나오는 리스트에는 포함이 안됨.
1번같은 경우는 간단하게 setLoading(false) 의 줄만 하나 내리면 해결 됐다.
2번은 먼저 filter 를 사용해서 검색 내용을 추려낼려고 했는데, 일단 filter 사용 자체가 나중에 데이터 내용이 많을 때 사용하게 되면 필터량이 많아져서 비효율적인게 문제였다. 당장은 이상없지만, 데이터가 많을 상황을 대비해서 필터는 과감하게 버리고 다른 방법을 찾아봤다.
const filtereData = data.filter(
(place) => place.place_name.includes(keyword) && place.category_group_code === "CE7"
);두번째 이유는 키워드로 검색했을 때 키워드가 place_name 에 포함되고 코드가 "CE7" 인걸 찾으려 하다보니 필터를 쓰게 됐었는데, 굳이 그럴 필요없이 option 을 줘서 카테고리를 한정지을 수 있었다.
// 카카오맵 공식 문서 예시
var places = new kakao.maps.services.Places();
var callback = function(result, status) {
if (status === kakao.maps.services.Status.OK) {
console.log(result);
}
};
// 공공기관 코드 검색
places.categorySearch('PO3', callback, {
// Map 객체를 지정하지 않았으므로 좌표객체를 생성하여 넘겨준다.
location: new kakao.maps.LatLng(37.564968, 126.939909)
});카카오맵 공식 문서 https://apis.map.kakao.com/web/documentation/#services_Places_categorySearch
const CAFE_GROUP_CODE = "CE7"
const ps = new kakao.maps.services.Places();
ps.keywordSearch(search, (data, status) => {
if (status === kakao.maps.services.Status.OK) {
setPlaces(data);
console.log('검색 후 결과 :', data);
} else {
alert('검색 결과가 존재하지 않습니다.');
setPlaces([]);
}
}, {category_group_code: CAFE_GROUP_CODE});
setLoading(false);먼저 세번째 인자에 객체 형태로 option 을 줄 수 있는데 여기에 내가 필요했던 category_group_code 를 주게 되면 1차적으로 필터링이 가능했다. 이후에 "CE7" 이라고 만 적으면 뭔지 모를 수 있으니까 CAFE_GROUP_CODE 라는 변수안에 CE7 을 넣고 옵션에 넣어줬다.
- Search 전역관리
import { useSearchParams } from 'react-router-dom';
const [searchParams, setSearchParams] = useSearchParams();
const keyword = searchParams.get('keyword');
console.log(keyword);search 를 다른 컴포넌트에서도 사용해야해서 전역으로 상태관리를 하려고 한다. 원래는 redux 로 할려고했는데 params 을 쓰는게 더 간편하다고 해서 간단하게 진행 하려한다. 물론 이후에 바꿀수도 있다..!
- 해야할 것들
우선 구현한 Search 기능에서 검색 기능만 남기고 데이터 불러오는 부분은 다른 컴포넌트에서 쓰기때문에 정리를 해줘야 할 것 같다. 그리고 useSearchParams 를 쓸지 redux 로 할지는 좀 더 의견을 나눠보고 정해야 할 것 같다.
:)