카테고리 상태값이 초기값으로 돌아가는 이유?

 

 

 

🚨 문제 상황

위에 사진과 같이 필터값은 제대로 받아와서 해당 필터값에 따른 데이터를 받아오지만 해당 카테고리를 눌렀을 때 상태값이 초기값으로 돌아가서 제대로 동작하지 않는 문제가 발생함

 

카테고리 코드

import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
import { useState } from "react";

type FiltersArray = {
	filters: string[];
	onFilterChange: (filter: string) => void;
};

const btnCustom = "p-2 rounded-full bg-gray-100 hover:brightness-90 absolute top-1/2 transform -translate-y-1/2";

export default function FilterCategory({ filters, onFilterChange }: FiltersArray) {
	const [swiper, setSwiper] = useState<SwiperClass>();
	const [activeFilter, setActiveFilter] = useState<string | null>(filters[0]);

	const handlePrev = () => {
		swiper?.slidePrev();
	};
	const handleNext = () => {
		swiper?.slideNext();
	};

	const handleClickFilter = (filter: string) => {
		onFilterChange(filter);
		setActiveFilter(filter);
	};

	return (
		<div className="relative">
			<Swiper
				modules={[Navigation]}
				navigation
				slidesPerView={1}
				spaceBetween={10}
				onSwiper={e => {
					setSwiper(e);
				}}
				updateOnWindowResize={true}
				breakpoints={{
					414: {
						slidesPerView: 2,
					},
					768: {
						slidesPerView: 3,
					},
					1024: {
						slidesPerView: 4,
					},
					1366: {
						slidesPerView: 6,
					},
				}}
				className="md:w-8/12 gap-4 mb-4">
				{filters.map((filter, index) => (
					<SwiperSlide key={index} className="flex justify-center">
						<button
							onClick={() => handleClickFilter(filter)}
							className={`w-[150px] font-semibold p-2 rounded-full ${
								activeFilter === filter ? "bg-brand text-white" : "bg-gray-100 text-black"
							}`}>
							{filter}
						</button>
					</SwiperSlide>
				))}
			</Swiper>
			<div className="hidden md:block">
				<button onClick={handlePrev} className={`${btnCustom} left-2`}>
					<FaArrowLeft />
				</button>
				<button onClick={handleNext} className={`${btnCustom} right-2`}>
					<FaArrowRight />
				</button>
			</div>
		</div>
	);
}

이 때 카테고리를 눌렀을 때 상태값을 관리해주는게 activeFilter 인데 여기저기에서 console.log을 확인해봐도 모든 상태들이 제대로 업데이트 되는걸 확인 할 수 있었다. 

 

아무리봐도 문제가 없어서 여기서 한참 시간을 낭비했다. 계속 이렇게 시간을 보내느니 팀원들과 상의해보는게 좋을거 같아서 회의 시간에 코드를 설명하면서 상의했는데...

 

결론은 쉽게 해결됐다.

문제를 넓게 보지 않고 그냥 카테고리 컴포넌트에서만 문제를 보고 있었는데 팀원이 카테고리를 바꾸면서 데이터가 다시 불러져오고 다시 렌더링 되면서 초기값으로 돌아가는 거 아닐까요? 라는 말에 바로 확인해봤는데 그 문제가 맞았다. ㅎㅎ

네트워크 탭에서 속도 조절해서 테스트 해보면 금방 알수 있는 문제였다. 

 

홈페이지 코드

import { useEffect, useState } from "react";
import FilterCategory from "../components/homepage/FilterCategory";
import { useInfiniteQuery } from "@tanstack/react-query";
import { getAccommodations } from "../util/http";
import AccommodationCard from "../components/homepage/AccommodationCard";
import { AccommodationInfo } from "../types/AccommodationInfo";
import LoadingSpinner from "../UI/LoadingSpinner";

...

const HomePage = () => {
	const [filter, setFilter] = useState(filters[0]);

	const {
		data: accommodation,
		...
	} = useInfiniteQuery({
		queryKey: ["accommodation", filter],
		queryFn: ({ pageParam }) =>
			filter === "전체" ? getAccommodations(pageParam, null) : getAccommodations(pageParam, filter),
		...
	});

	useEffect(() => {
		...
	}, [fetchNextPage, hasNextPage, isFetchingNextPage]);

...

	const handleFilterChange = (selectedFilter: string) => {
		setFilter(selectedFilter);
	};

	return (
		<div className="p-4">
			<FilterCategory filters={filters} onFilterChange={handleFilterChange} />
			<div>
				{accommodation.pages && (
					<ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5 gap-y-4">
						{accommodation.pages.map(page =>
							page.map((item: AccommodationInfo) => <AccommodationCard key={item.id} accommodation={item} />),
						)}
					</ul>
				)}
				...
			</div>
		</div>
	);
};

export default HomePage;

 

✏️ 문제 이유

데이터를 계속 업데이트 시키는 로직을 따로 컴포넌트로 분리하지 않고 카테고리 컴포넌트와 같이 사용하면서 생긴 오류. 

데이터가 계속 업데이트되면 같이 묶어둔 카테고리 컴포넌트도 계속 렌더링 되면서 초기값으로 돌아가는게 이유였다. 

 

💡 문제 해결

데이터를 업데이트 해주는 로직을 따로 컴포넌트로 생성해서 각각 따로 분리해서 사용해줬다. 

import { useState } from "react";
import FilterCategory from "../components/homepage/FilterCategory";
import AccommodationList from "../components/homepage/AccommodationList";

...

const HomePage = () => {
	const [filter, setFilter] = useState(filters[0]);

	const handleFilterChange = (selectedFilter: string) => {
		setFilter(selectedFilter);
	};

	return (
		<div className="p-4">
			<FilterCategory filters={filters} onFilterChange={handleFilterChange} />
			<AccommodationList filter={filter} />
		</div>
	);
};

export default HomePage;

 

변경 후 잘 동작하는 걸 확인할 수 있다! 

 

조금 만 생각해보면 금방 해결할 수 있는 문제였는데 시간을 낭비한게 조금 아쉬웠다 ㅠㅠ

 

그러면서도 프로젝트를 진행하면서 확실하게 알 수 있었던건 팀원과 커뮤니케이션 하는게 이렇게 중요하구나 했다. 이번 프로젝트 하면서 팀원들과 유독 소통을 많이 했는데 서로 수시로 회의하면서 모르는 코드도 물어보고 수정하면 어떻게 수정했는지 설명 하기도 했는데 그러다 보니 이런 문제가 생겼을 때 서로 상의하기 쉬운 분위기가 생겼고 이것 처럼 금방 해결할 수 있었다.