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

한 Api에 prameter가 필수가 아니면서 여러개 들어가는 경우가 있다. 예를 들면 search bar라던지…

이럴땐 데이터 패칭을 여러번 하지않고 해당 parmeter를 변수로 선언하고 그 변수에 값이 담겼을 경우,
클릭 또는 submit을 했을 때,
삼항연산자를 사용해서 원하는 데이터만 백엔드에서 가져올 수 있다.

삼항연산자

이번 프로젝트에서는 백엔드 분의 취향이신지, 아님 블로그 형식의 사이트를 만드는 거라 그런지 이런식으로 여러 parameter를 활용하는 api 가 좀 있어서 아래 형태를 유용하게 쓰고 있다. easy peasy…

 

/magazineList.js

	const [magazines, setMagazines] = useState([]);
	const getData = async () => {
		const query_type = selectedType.toLowerCase().replace(/ /g, "-");
		const magazineList: string[] = await SantiagoGet(
			`magazines?${regionId ? `region_id=${regionId}&` : ""}query_type=${
				query_type || "hot"
			}&base=0&limit=20${searchTerm ? `&search=${searchTerm}` : ""}${user_id ? `&user_id=${user_id}`:""}`,
		);
		setMagazines(magazineList.data);
	};
	
	useEffect(() => {
		getData();
	}, [selectedType, regionId, searchTerm]);

 

 

이건 그냥 데이터 패칭을 모듈화 해놓은 것이다. 많이 가져다 쓰기에...

/fetchData.js

export async function SantiagoGet<T>(url: string): Promise<T> {
	const res = await fetch(`http://서버주소/${url}`, {
		method: "GET",
		headers: {
			"Content-Type": "application/json",
		},
	});

	if (!res.ok) {
		throw new Error(`Failed to fetch posts, received status ${res.status}`);
	}
	const data = await res.json();
	return data
    }

 

 

(이 글은 옵시디언을 통해서 발행되었습니다.)