[하루메이트] 오늘의 회고 - 22.07.05

 

😇 카카오 맵 API type 관련 any 오류 처리

 

처음 카카오 맵 타입 처리한 것

import { PayloadAction, createSlice } from '@reduxjs/toolkit';

interface IInitial {
  map: any;
}

const initialState: IInitial = {
  map: {},
};

const mapSlice = createSlice({
  name: 'map',
  initialState,
  reducers: {
    setMap(state, action: PayloadAction<any>) {
      state.map = action.payload;
    },
  },
});

export const mapReducer = mapSlice.reducer;
export const mapActions = mapSlice.actions;

kakao.map.d.ts를 어떻게 사용해야 할지 감을 못 잡아서 any를 써버리기로 했었습니다.

 

---

 

import { PayloadAction, createSlice } from '@reduxjs/toolkit';

import mapInitialState from '../utils/constant/mapInitialState';

interface IInitial {
  map: kakao.maps.Map;
}

const initialState: IInitial = {
  map: mapInitialState,
};

const mapSlice = createSlice({
  name: 'map',
  initialState,
  reducers: {
    setMap(state, action: PayloadAction<kakao.maps.Map>) {
      state.map = action.payload;
    },
  },
});

export const mapReducer = mapSlice.reducer;
export const mapActions = mapSlice.actions;

any를 안 써보겠다고 엄청난 몸 비틀기를 했습니다...

그 결과... kakao.maps.Map 그냥 이런 식으로 사용하면 되었던 것이었습니다...

생각보다 매우 간단해서 너무나 허망했던 것입니다...

 

---

 

😇 useKeywardSearch 커스텀 훅 제작

 

처음 만들었던 것

const useKeywordSearch = (
  displayPagination: (pagination: Pagination) => void,
  searchPlace: string,
  x?: string,
  y?: string,
  radius?: number
) => {
  const map = useSelector((state: RootState) => state.map.map);
  const ps = new kakao.maps.services.Places();
  const dispatch = useDispatch();

  const placesSearchCB = (
    datas: PlacesSearchResult,
    status: string,
    pagination: Pagination
  ) => {
    if (status === kakao.maps.services.Status.OK) {
      const bounds = new kakao.maps.LatLngBounds();
      for (let i = 0; i < datas.length; i += 1) {
        const data = datas[i];
        const [dx, dy] = [data.x, data.y];
        bounds.extend(new kakao.maps.LatLng(Number(dy), Number(dx)));
      }
      map.setBounds(bounds);
      displayPagination(pagination);
      dispatch(placeListActions.addList(datas));
    }
  };

  useEffect(() => {
    ps.keywordSearch(searchPlace, placesSearchCB, {
      x: Number(x),
      y: Number(y),
      radius,
    });

    return () => {
      dispatch(placeListActions.resetList());
    };
  }, [searchPlace]);
};

이렇게 했을 경우, 종속성 배열에 placeSearchCB, ps 등등을 넣어줘야 하는데 넣으면 터집니다.

 

---

 

그나마 고친 것

const useKeywordSearch = (
  displayPagination: (pagination: Pagination) => void,
  searchPlace: string,
  x?: string,
  y?: string,
  radius?: number
) => {
  const map = useSelector((state: RootState) => state.map.map);

  const dispatch = useDispatch();

  const ps = new kakao.maps.services.Places();

  const placesSearchCB = useCallback(
    (datas: PlacesSearchResult, status: string, pagination: Pagination) => {
      if (status === kakao.maps.services.Status.OK) {
        const bounds = new kakao.maps.LatLngBounds();
        for (let i = 0; i < datas.length; i += 1) {
          const data = datas[i];
          const [dx, dy] = [data.x, data.y];
          bounds.extend(new kakao.maps.LatLng(Number(dy), Number(dx)));
        }

        map.setBounds(bounds);
      }
      if (datas.length) {
        displayPagination(pagination);
        dispatch(placeListActions.addList(datas));
      }
      // TODO 여기에 검색한 결과가 없다는 컴포넌트 보여줄 상태 필요할 듯
    },
    [dispatch, displayPagination, map]
  );

  useEffect(() => {
    ps.keywordSearch(searchPlace, placesSearchCB, {
      x: Number(x),
      y: Number(y),
      radius,
    });

    return () => {
      dispatch(placeListActions.resetList());
    };
  }, [searchPlace, dispatch, x, y, radius, placesSearchCB]);
};

useCallback 훅을 사용하여 터져 버리는 것을 막았습니다.

 

하지만 이렇게 하면 displayPagination 함수에 의해 또 터져버립니다.

따라서 displayPagination 또한 useCallback을 사용하여 터지는 것을 막았습니다.

 

어찌어찌 하긴 했는데, ps를 넣었을 경우 당연히 터지기 때문에 이것에 대해 생각해보아야 합니다.

-> 그냥 useEffect 안에 넣어서 해결했습니다..!