db 용량 제한 때문에 분량 조절에 실패했네요ㅠ 짧지만 이전글에 이어서 작성합니다.

←이전 글 보러가기

지도 페이지 상태 관리 Context.js

const initialRealEstate = {
	  realEstate: [],
	  mapBounds: {},
	  selected: [],
	  mapCenter: {},
	  map: null,
	  clusterer: null,
  	  roomTypeFilter: {
  	    원룸: { isOn: true, roomType: '원룸' },
  	    빌라: { isOn: true, roomType: '빌라' },
	    오피스텔: { isOn: true, roomType: '오피스텔' },
	    아파트: { isOn: true, roomType: '아파트' },
	  },
	  tradeTypeFilter: {
	    월세: false,
	    전세: false,
	    deposit: [20, 50],
	    monthly: [20, 50],
	    depositStep: 1,
	    monthlyStep: 1,
	  },
	};
	

	export const RealEstateContext = createContext();
	export const RealEstateContextDispatch = createContext();
	

	function realEstateReducer(state, action) {
	  switch (action.type) {
	    case 'GET_REAL_ESTATE':
	      return { ...state, realEstate: action.realEstate };
	    case 'GET_BOUNDS':
	      return { ...state, mapBounds: action.getBounds };
	    case 'GET_SELECTED_ESTATE':
	      return { ...state, selected: action.selected };
	    case 'UPDATE_MAP':
	      return { ...state, map: action.map };
	    case 'UPDATE_CLUSTERER':
	      return { ...state, clusterer: action.clusterer };
	    case 'UPDATE_MARKER':
	      return { ...state, marker: action.marker };
	    case 'UPDATE_ROOM_TYPE_FILTER':
	      return { ...state, roomTypeFilter: action.roomTypeFilter };
	    case 'UPDATE_TRADE_TYPE_FILTER':
	      return { ...state, tradeTypeFilter: action.tradeTypeFilter };
	    default:
	      throw new Error('UNKNOWN ACTION TYPE', action.type);
	  }
	}
	

	export function GlobalContextProvider({ children }) {
	  const [realEstate, markerDispatch] = useReducer(
	    realEstateReducer,
	    initialRealEstate
	  );
	

	  return (
	    <RealEstateContext.Provider value={realEstate}>
	      <RealEstateContextDispatch.Provider value={markerDispatch}>
	        {children}
	      </RealEstateContextDispatch.Provider>
	    </RealEstateContext.Provider>
	  );

지도 페이지 전체에서 공용으로 쓰이던 context.js이다.

• realEstate - 지도 범위 내의 매물들의 정보가 객체 배열이 저장된다.
• mapBounds - 지도의 범위를 나타내기 위한 좌표가 객체로 저장된다.
• selected - 지도 위의 클러스터를 클릭했을 때, 클러스터에 해당하는 매물들만 객체 배열로 저장
• mapCenter - 지도의 중심 좌표가 객체로 저장된다.
• map, clusterer - kakao map api를 통해 받은 지도와 클러스터러 객체가 저장된다. 지도와 클러스터를 dom에 접근하여 업데이트 하기 위해 필요하다.
• roomTypeFilter, tradeTypeFilter - 모달에서 체크된 건물의 종류, 전월세 필터링의 내용이다. 이벤트가 일어날 때마다 키값이 업데이트 된다.

그 외의 dispatch는 위에서처럼 간단하게 작성하였다.

마치며

제대로 된 회고를 남기고 싶어 길고 상세한 글로 정리하였다. 회고를 작성하면서 보니, 그냥 흘려보내기엔 아까운 경험들도 많았던 것 같다. 프로젝트 마지막 날, 코딩을 하다가 밤을 새서 해가 뜨는 것을 봤는데 그 기억이 자꾸 맴돈다..ㅎㅎ 그때도 고생을 하면서 참 즐거웠다. 이런 저런 고생을 하면서도, 이 때처럼 배워가면서 즐겁게 개발을 이어가길 바라며.