next.js | react.js 매거진 리스트 데이터 패칭 문제 해결

고민? 많은 쿼리를 같이 사용하는 한 api url

 

매거진 리스트를 받아오는 한 api에 총 4 query를 사용하려고 했다. 

아래는 변경 전 코드이다. 

      const getData = async () => {
        const magazineList = await SantiagoGet(
			`magazines?${continent ? `continent=${continent}&` : ""}${
				currentRegionId
					? `region_id=${currentRegionId}&`
					: regionIdFromMain
					? `region_id=${regionIdFromMain}&`
					: ""
			}query_type=${query_type || "hot"}&base=0&limit=50${
				searchTerm ? `&search=${searchTerm}` : ""
			}${user_id ? `&user_id=${user_id}` : ""}`,
		);
		setMagazines(magazineList.data);
       }

 

 

편하고 간단하게 코드를 짠 줄알고 신나서 글까지 썼었다.. ㅋㅋ

Next, React api url 삼항연산자로 편리하게 사용하기

 

 

하지만, 문제가 있었다.

받아오는 변수들이 쌓여있어 url에 이전 사용한 변수가 같이 담긴채 보내지는 것이였다. 

 

예를 들어 regionId의 부분을 클릭하고 리스트를 받아온 뒤,

검색기능으로 searchTerm을 사용했다면,

백엔드로 보내는 url 에 searchTerm만 있어야하는데 regionId, searchTerm 둘다 변수 값이 담겨있기 때문에 그 조건에 맞은 매거진리스트가 없어 빈 배열로 값을 받게 된다. 

 

처음엔 문제해결이 간단해보였다. 변수 값이 사용한 뒤에도 담겨 있다면 그것을 비워주면 되는게 아닌가.

근데 그렇게하니 그냥 데이터를 두 번 받아오는 꼴이 되었다. 아마 코드를 이상하게 짰던 것 같다. (일주일전이라 기억이..ㅜ)

 

아무튼 오늘 해결을 했다!!! console.log에게 감사를..

각각 변수마다 if문으로 나눈 뒤, 매거진 리스트를 담는 magazines 에 받아오는 정보를 받은 뒤, 해당 변수만 값을 공백으로 비웠다.

 

아래는 변경 후 코드다.

/Magazines.tsx
const Magazines = ({
	selectedType,
	regionIdFromMain,
	searchTerm,
	setSearchTerm,
	user_id,
	continent,
	setContinent
}: MagazinesProps) => {
	const { regionId, setRegionId } = writeStore();
	const [magazines, setMagazines] = useState<MagazineProps[]>([]);

	const getData = async () => {
		const query_type = selectedType.toLowerCase().replace(/ /g, "-");
		if (searchTerm) {
			const magazineList = await SantiagoGet(
				`magazines?query_type=${query_type || "hot"}&base=0&limit=50&search=${searchTerm}${user_id ? `&user_id=${user_id}` : ""}`,
			);
			setMagazines(magazineList.data);
			setSearchTerm("");
		} else if (regionId || regionIdFromMain ) {
			const magazineList = await SantiagoGet(
				`magazines?${
							regionId
								? `region_id=${regionId}&`
								: regionIdFromMain
								? `region_id=${regionIdFromMain}&`
								: ""
						}query_type=${query_type || "hot"}&base=0&limit=50${user_id ? `&user_id=${user_id}` : ""}`,
			);
			setMagazines(magazineList.data);
			setRegionId("");
		}else if (continent){
			let continentSearch =continent
			if(continent ==="all"){
				continentSearch="";
			}
			const magazineList = await SantiagoGet(
				`magazines?${continentSearch ? `continent=${continentSearch}&` : ""}query_type=${query_type || "hot"}&base=0&limit=50${user_id ? `&user_id=${user_id}` : ""}`,
			);
			setMagazines(magazineList.data);
			setContinent("")
		}
	};

	useEffect(() => {
		getData();
	}, [selectedType, regionId, searchTerm]);

 

 

번거롭긴하지만 확실한 코드였고 너무 초반부터 짭고 간단한 코드를 추구하는게 risky하다는 것을 깨달았다. 보는 사람에게도 오히려 아래 코드가 더 명확하게 이해될 것 같다는 생각도 들었다.