Feat: useMapContext hooks & usePlaceServices hooks

[dev-allenk]

그렌 안녕하세요 ㅎ 패키지 쓰면서 필요했던 기능을 좀 더 쉽게 쓸 수 있게 커스텀훅으로 만들어봤어요.

1. useMapContext hooks

• kakaoMapContext.Provider 가 가지고 있는 kakaoMapObj 와 map 객체를 밖으로 빼서 사용하기 위해 만든 hooks에요.
• 생성된 map객체의 메서드를 활용하기 위해서 필요했어요. (ex: map.setCenter 링크)
• map 객체는 KakaoMap컴포넌트 하위에서만 접근 가능하지요. MapContextForwarder 컴포넌트를 KakaoMap 컴포넌트 하위에 사용하면 useMapContext hooks의 state로 kakao와 map을 사용할 수 있게 만들어봤어요.
• 최적화는 고려 안했습니다..😅

2. usePlaceService hooks

• 카카오 지도 서비스 중 장소검색 서비스를 사용하기 위한 hooks에요.(참고링크)

사용 예시

const {MapContextForwarder, kakao, map} = useMapContext();
const {placeService} = usePlaceService();

  const handleClick = ({ currentTarget }) => {
    const { x, y } = currentTarget.dataset.latlng;
    map.setCenter(new kakao.maps.LatLng(y, x));
  };

  const handleSubmit = e => {
    e.preventDefault();
    placeService.keywordSearch(
      keyword,
      response => console.log(response)
    );
  };

  return (
    <KakaoMap
      apiUrl={process.env.KAKAO_MAP_API_URL}
      width="100%"
      height="700px"
      level={2}
      lat={37.490826}
      lng={127.03342}
    >
      <MapContextForwarder />
    </KakaoMap>

기타

패키징했을 때 잘 동작하는지 확인해보고 싶었는데 demo폴더를 어떻게 활용해야할지 잘 모르겠어요. 시간 괜찮으면 알려주세요. 테스트 해보고 커밋 추가할게요. PR 검토 부탁드려요!

[dev-allenk]

계속 사용하다보니까 useMapContext를 사용하는게 안 좋은 패턴일지도 모른다는 생각이 드네요..ㅎㅎ KakaoMap 컴포넌트 하위에서 커스텀 컴포넌트를 만들고 그 커스텀 컴포넌트에서 kakaoMapContext를 사용하는게 더 나을지도 모르겠어요. 필요한 state는 props로 전달받구요. KakaoMap 컴포넌트를 사용하는 쪽에서 kakao객체를 접근하려고 만든건데, 하위에서 사용하는게 코드 분리하는 측면에선 더 좋아보이네요. 한번 살펴보고 의견 부탁해요 ㅎㅎ