비동기... 딜레이 그만...!

코드

• 구현하고자 하는 기능
  : PlaceBtn을 클릭 했을 때 해당 category의 장소 리스트 화면에 출력

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}&region=제주시&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 값 변경이 잘 일어나 원하는 데이터 목록이 잘 출력됨을 확인할 수 있다.