[React] useState로 onClick 시 아이콘 변경 + 캐러셀 움직일때 같이 해당 아이콘 변경 (naverMap)

여전히 기업협업중 ,,! 

 

아직도 home을 끝내지 못했다... 😂

 

 

useState를 사용해서 map을 돌린 데이터에있는 이미지a 를 누를 때 이미지b 로 바뀌는 것을 하는데, 

하나를 선택하고 다른것을 선택할 때 이미지가 다시 초기화 되지 않는다거나, 

모두 눌리거나 하는 상황이 발생..

 

 

왜 코드는 매번 할때마다 새로울까 😂

 

그래서 다시 고친 후 정리를 해 보겠다... 

 

 

 

오늘 정리할 내용은

1. map 매서드를 쓴 후 아이콘을 각각 눌렀을 때 상태변경 관리

2. 캐러샐을 움직일 때 해당 데이터를 가진 marker가 지도 중앙으로 오면서 이미지도 변경되기

이다.

 

 

이전에 했던 코드에서 추가된 것이 있어서 혹~ 시나 참고 하시려면 

https://hayley-0616.tistory.com/44

[React] 네이버 지도 API 이용 캐러셀 + center 움직이기

여기에 같이 있으니 참고해주시길... 👀

 

 

 

추가된 코드 

 

👀 Home.jsx

const [isMarkerClicked, setIsMarkerClicked] = useState([]);


//마커가 클릭될 때 호출되는 함수
//isMarkerClicked 배열에서 map함수를 사용해서 모든 마커 클릭 상태를 검사하고, 
//선택된 마커의 인덱스에 해당하는 값만 !toggle로 반전시킨다. (이미지 변경)

const handleMarkerClick = (e, mart, index) => {
    setSelectedMart(mart);
    const newToggles = isMarkerClicked.map((toggle, i) => {
      if (i === index) {
        return !toggle;
      } else {
        return isMarkerClicked[index] === false ? false : toggle;
      }
    });
    setIsMarkerClicked(newToggles);
  };

  useEffect(() => {
    if (homeMartList) {
      setIsMarkerClicked(
        Array.from({ length: homeMartList.length }, () => false)
      );
    }
  }, [homeMartList]);

homeMartList가 업데이트 될 때마다 isMarkerClicked 배열을 초기화 한다. 

Array.from  함수를 사용해서 homeMartList 배열 길이와 같은 배열을 생성하고, 모든 요소를 false로 초기화 한다. 

즉, isMarkerClicked 배열은 마커의 클릭 상태를 관리하고, 이미지를 변경한다. 

 

 

 

 

 

 

2. 캐러샐을 움직일 때 해당 데이터를 가진 marker가 지도 중앙으로 오면서 이미지도 변경되기

 

캐러샐을 움직여서 해당마트 데이터가 보여지면  해당마트 위치로 지도 중심을 이동시키고, 마커를 클릭 한 것처럼 보여주는 기능을 넣어 보았다. 

//매개변수는 smIndex 를 받고, 현재 선택된 마트가 HomeCarousel에서 몇 번째 마트인지 나타낸다. 

const changeCenterByCarousel = smIndex => {
    let nextIndex = 0;
    if (smIndex === homeMartList.length - 1) {
      nextIndex = 0;
    } else {
      nextIndex = smIndex + 1;
    }
//nextIndex 변수는 현재 선태된 마트 다음마트의 인덱스를 계산하기 위해 사용되었다. 
//여기서 선택된 마트가 배열의 마지막 마트라면, nextIndex는 0 으로 넘어가게 되고, 아니면 +1이 된다.
//(이렇게 했을때 무조건 다음마트가 나오게 되어 여기는 수정을 해야한다.. )

  setSelectedMart(homeMartList[nextIndex]);
    const newToggles = isMarkerClicked.map((toggle, i) => {
      if (i === nextIndex) {
        return true;
      } else {
        return isMarkerClicked[nextIndex] === false ? false : toggle;
      }
    });
    setIsMarkerClicked(newToggles);
  };
  
 //setSelectedMart 함수를 이용해서 현재 캐러셀에 보여지는 마트를 homeMartList에서 찾아서 지정을 한다. 
 // 그리고 해당 마트의 index를 사용해서 isMarkerClicked 배열의 해당 인덱스를 true로 변경하고, 
 //다른 마커의 상태를 false로 변경한다.

 

여기서 사용된 changeCenterByCarousel 함수는 Home의 자식컴포넌트인 HomeCarousel.jsx 에서 쓰여지는 함수이다.

위의 함수를 이용해서 지도 중심도 이동시키고, 마커의 상태도 변경할 수 있었다. 

 

 

 

 

 

 

👀 HomeCarousel.jsx

 

const HomeCarousel = ({
  homeMartList,
  selectedMart,
  handleModal,
  changeCenterByCarousel,
}) => {
  const settings = {
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '25px',
    draggable: true,
    arrows: false,
    beforeChange: (current, next) => {
      setCurrentSlide(next);
    },
  };
  //slick-carousel 라이브러리에서 제공하는 설정 속성 중 하나 
  
  const [slider, setSlider] = useState(null);
  const [checked, setChecked] = useState(false);
  const [currentSlide, setCurrentSlide] = useState(0);
  const smIndex = homeMartList.indexOf(selectedMart);
  
    const handleFavorite = () => {
    setChecked(prevChecked => !prevChecked);
  };