Refactor/#293: 모달 합성 컴포넌트 적용 && 지도 페이지 의존성 주입 Context API 적용

[hwinkr]

🤠 개요

• closes : Refactor: 모달의 구성을 합성 컴포넌트로 변경 #293
• 모달의 구성을 합성 컴포넌트로 변경 했어요
• 지도 페이지에서 필요한 의존성들을 Context API를 사용해서 주입하는 걸로 변경했어요

💫 설명

• 지도 페이지에서 필요한 의존성들은
  • 지도(카카오 지도)
  • 사용자 위치
  • 커스텀 오버레이(건물 번호)를 관리할 상태

이렇게 총 3가지가 있는데, 기존에는 props로 필요한 의존성들을 주입해줬는데 지도를 구성하는 각 컴포넌트들이 받는 props가 중복되기도 하고 중복된 props를 넘겨주니 가독성도 떨어지는 것 같아서 Context API를 사용해서 의존성을 주입해봤어요.

const MapPage = () => {
  return (
    <Map>
      <Map.PknuMap />
      <Map.MapHeader />
      <Map.FilterButtons />
      <Map.RefreshButtons />
    </Map>
  );
};

const Map = ({ children }: MapProps) => {
  const [map, setMap] = useState<any | null>(null);
  const [userLocation, setUserLocation] = useState<Location | null>(null);

  return (
    <PknuMapContext.Provider value={{ map, setMap }}>
      <UserLocationContext.Provider value={{ userLocation, setUserLocation }}>
        <OverlayProvider>
          <MapContainer>{children}</MapContainer>
        </OverlayProvider>
      </UserLocationContext.Provider>
    </PknuMapContext.Provider>
  );
};

export default Map;

Map.PknuMap = PknuMap;
Map.MapHeader = MapHeader;
Map.FilterButtons = FilterButtons;
Map.RefreshButtons = RefreshButtons;

사용할 때는, 커스텀 훅을 호출해서 의존성들을 사용할 수 있도록 했어요.

const MapHeader = () => {
  const { map } = useMap();
  //...

커스텀 훅 많이 활용하기

이번 작업을 하면서, 렌더링 로직에 관여하는 훅을 사용할 때 커스텀 훅으로 최대한 만들어 보려고 했는데 이렇게 해보니

• 렌더링 로직
• UI 마크업

이 2가지의 관심사 분리가 잘 되는 것 같아서 좋은 것 같더라고여(대충 저번에 젭에서 최대한 커스텀 훅을 활용해야 한다고 했던 대화..)
그래서, 앞으로도 렌더링 로직이 복잡하다 싶으면 커스텀 훅으로 최대한 빼는게 좋을 것 같아요. 추상화의 장점도 있어서 좋은 것 같네요

const FilterButtons = () => {
  const userLocation = useUserLocation();
  const { map } = useMap();
  const { activeTypes, handleBuildingTypes } = useBuildingTypes();
  //...

📷 스크린샷 (Optional)

[pp449]

확실히 하나의 파일에 코드가 줄어드는거 같아 보기는 편해지는거 같아요
근데 지도 로직은 아직 어렵네요.. ㅎㅎ

[pp449]

여기에 onClick 이벤트가 사라지면 건의사항 남기기는 어떻게 처리가 되나요?

[hwinkr]

건의사항 남기기는 이제 페이지로 만들거여서 일단 건의사항 관련 로직은 없앴어요~

[pp449]

split 후 다시 합치는것보다 정규표현식 또는 keyword.replaceAll(" ", "").toUpperCase() 는 어떨까요?