-
Notifications
You must be signed in to change notification settings - Fork 3
함수 및 변수 관리
Yi Yonghun edited this page Dec 26, 2023
·
1 revision
모든 API 요청 함수는 src폴더 안에 api폴더 안에 작업 페이지 폴더에 파일을 만들어 관리합니다.
파일 이름은 요청 방식 + 요청 데이터로 작성합니다.
getUserData.ts
코드는 아래와 비슷한 양식으로 작성합니다.
const getUserData = async () => {
const result = await fetch("http://localhost:8123/api/hi");
if (!result.ok) {
throw new Error("Failed to fetch data");
}
return result.json();
};
export default getUserData;
컴포넌트에서 API요청 파일을 불러와서 사용합니다.
"use client";
import { useQuery } from "@tanstack/react-query";
import getUserData from "../_api/getUserData";
const User = () => {
const { data } = useQuery({
queryKey: ["user"],
queryFn: getUserData,
});
return <p>{data}</p>;
};
export default User;
app폴더 안에 constants.ts파일에 공통 상수를 모두 같이 관리합니다.