엘리스 데이터 분석 웹 프로젝트2

저번에 이어 많은 작업들을 진행하였다.

추가된 사항으로는

• 각 폴리곤 마다 이벤트 지정
• 점수 별 색상 및 투명도 차이
• 하위 메뉴 버튼 호버링시 설명 display

이렇게 추가되었고 현재는 상세페이지 작업중이다.

저 기능들을 구현하면서 어려웠던 점은

첫째로는

메인버튼을 클릭할 때 데이터를 받아와서 상태배열에 저장하는데 이때 폴리곤을 다시 그리게 된다.
폴리곤을 다시 그릴때 기존 폴리곤 위에 겹쳐서 그려지는 문제가 생겨서 성능저하를 유발했다.

이전 폴리곤을 생성할 때 문의를 통해 받은 답변 중 맵은 가만히 있고
그위에 원하는 걸 그리는 식으로 구현하라 했었던 말이 떠올라서 다음과 같이 구현했다.

1. 초기로딩 폴리곤 생성시 각각의 폴리곤을 상태배열에 저장.
2. 새로운 폴리곤 생성 함수 호출시, 상태배열에 들어있던 폴리곤을 .setMap(null) 메소드를 통해 폴리곤 제거.
3. 폴리곤 상태배열 초기화, 새로운 폴리곤 생성, 상태배열에 할당.

이 과정을 거치니 잘 해결이 되었는데 1번을 진행할때 .forEach문을 통해 그 안에서 setState()를 진행하니 비동기처리와 같은 현상이 일어나게 되는 것을 알게되었고, 이는 .map함수를 통해 하나의 배열에 저장하고 그 배열을 setState() 해주니 잘 저장되었다.

useEffect(() => {
    if (isloaded) {
      polygons.map((polygon) => polygon.setMap(null));
      setPolygons([]);
      const newPolygons = locations.map((location) => displayArea(location));
      setPolygons((prevPolygons) => prevPolygons.concat(newPolygons));
    }
  }, [isloaded, mainValue, subValue]);

이렇게 구현하였다.

또한 각 폴리곤 마다 데이터가 할당 되었을 때 / 할당되지 않았을 때 다른 결과를 반환하게 했고
데이터가 로딩되고 폴리곤에 적용되어야되는 것들은 함수를 통해 구현하였다.

const displayArea = useCallback(
    (area) => {
      //get함수 정의
      function getName() {
        if (!target) return area.name;
        const { name } = target[subValue].filter(
          (data) => data.name === area.name
        )[0];

        return name;
      }
      function getHover() {
        const { hover } = target[subValue].filter(
          (data) => data.name === area.name
        )[0];

        return hover;
      }
      function getScore() {
        if (!target) return 0.7;
        let { score } = target[subValue].filter(
          (data) => data.name === area.name
        )[0];
        if (score < 50) {
          score = 50 - score;
        }

        return score;
      }

      function getColor(score) {
        if (score > 50) {
          return "#00A500";
        } else {
          return "#FF2424";
        }
      }

      // 다각형을 생성합니다
      let polygon = new kakao.maps.Polygon({
        map: kakaoMap,
        path: area.path,
        strokeWeight: 2,
        strokeColor: "#004c80",
        strokeOpacity: 0.8,
        fillColor: "#fff",
        fillOpacity: 0.7,
      });

      //target에 데이터를 받아오면
      if (target) {
        polygon.setOptions({
          fillOpacity: getScore() / 100,
          fillColor: getColor(getScore()),
        });
      }
      
      (...)
       
   },[...]);

일단 구동에 성공했으나 현재 displayArea가 호출 될 때 마다 같은 함수들이 생성되는 것을 알 수 있다.

이는 차후에 displayArea함수 밖으로 빼내어 호출하는 방법으로 구현해야 좀 더 성능이 미약하게나마 좋아지지 않을까 생각한다.

클릭한 하위메뉴 버튼에 따라 음영이 다르고 50점을 기준으로 50점 미만은 빨간색이 점점 진해지게, 50점 이상은 초록색이 점점 진해지게 설정했다.

웹프로젝트의 담당 코치님이 계신데 코치님 의견으로는 맵컴포넌트에서 데이터를 받아오고 그리고를 다 하다보니 너무 많은 일을하고 폴리곤을 그리는 함수의 경우 내부에 함수가 너무 많아 리팩토링이 필요하다고 하셨다. 내가 봐도 분리할 수 있는 코드들이 보여서 기능을 다 구현한 후 코드 분리를 해봐야겠다.