const categories = ['관광명소', '음식점', '카페'];
const categoriesCode = [ 'AT4', 'FD6', 'CE7'];
const [ activeTab, setActiveTab] = useState<any>(0); // 선택된 탭을 관리하는 상태
// -------- categry별 장소 데이터 가져오기 ----------
// AT4(관광명소), CE7(카페), FD6(식당)
const GetRestaurantNoRegion = async () => {
try {
const response = await baseInstance.get(`findplace/group?query=${query}®ion=제주시&group=${categoriesCode[activeTab]}`, {
headers: { Authorization: `${localStorage.getItem('Authorization')}` },
});
SetPlaceData(response.data);
console.log(response);
console.log('activeTab',activeTab);
} catch (error) {
console.log(error)
}
}
return(
{categories.map((item, index) => (
<PlaceBtn
key={index}
title={item}
onClick={()=>{setActiveTab(index); GetRestaurantNoRegion();}}
active={activeTab === index} // 현재 탭이 활성화된 경우 true, 아닌 경우 false
/>
))}
)
클릭했을 때 GetRestaurantNoRegion이 실행되도록 코드 작성
state값이 바로바로 반영이 되지 않는다.
만약에 음식점을 누르면 기존에 저장된 state(activeTab)값이 반영된다. 그리고 음식점을 한 번 더 눌러야 해당 인덱스 값이 반영된다.
인덱스에 맞게 요청은 잘 들어가는데 클릭이벤트에서 state를 update하는 쪽에서 선택한 값이 바로 바뀌지 않는 것이 문제인 것 같다.
useEffect(() =>{GetRestaurantNoRegion();},[activeTab]);
useEffect를 추가하여 activeTab이 변경될 때마다 GetRestaurantNoRegion를 실행시키도록 하였다.
클릭 할 때마다 state 값 변경이 잘 일어나 원하는 데이터 목록이 잘 출력됨을 확인할 수 있다.