뒤로가기 버튼 만들기 | useNavigate | React
react-router-dom 사용할 때 특정 페이지에서만 컴포넌트(Header,Footer,Nav 등) 보여주기
✨axios.post 요청 시, 데이터 객채에 빈 값을 보내는거면 {} 가 아닌 null로 보내기✨
// axios.get 요청할 때 params 넣어 보내기
// params, headers 같은 중괄호에 넣기✨
// axios 요청을 통한 친구들의 펀딩 목록 가져오기
useEffect(() => {
axios.get(import.meta.env.VITE_BASE_URL + "/api/fundings/calendar", {
params: {
"year": curYear,
"month": curMonth,
},
headers: {
Authorization: `Bearer ${localStorage.getItem("access-token")}`,
}})
.then((res) => {
console.log(res)
const formatEvents = res.data.data.map((item) => ({
title: item.title,
date: item.anniversaryDate,
name: item.consumerName,
}))
setEvents(formatEvents)
console.log("친구들의 펀딩목록 받아오기 성공")
})
.catch((err) => {
console.error(err)
console.log("친구들의 펀딩목록 받아오기 실패")
})
}, [curYear, curMonth])
[React] axios - request 여러 개 요청하기 (multiple request)
// 로그아웃과 fcm토큰 삭제를 한번에?
const totalLogOut = () => {
// 로그아웃 axios 요청
const logOut = axios
.post(import.meta.env.VITE_BASE_URL + "/api/consumers/logout", null, {
headers: {
Authorization: `Bearer ${localStorage.getItem("access-token")}`,
},
})
// fcm 토큰 지우기
const deleteFCM =
axios.delete(import.meta.env.VITE_BASE_URL + "/api/fcm-tokens", {
data: {
"fcmToken": localStorage.getItem("fcm-token")
},
headers: {
Authorization: `Bearer ${localStorage.getItem("access-token")}`,
}
})
Promise.all([logOut, deleteFCM])
// 두 요청이 성공했을 경우
.then(axios.spread((res1, res2) => {
console.log(res1) // 로그아웃 성공했을 때 res
console.log(res2) // fcm-token 삭제 성공했을 때 res
localStorage.clear() // 로컬 스토리지 초기화
navigate("/") // 로그아웃 성공했으면 메인으로 날라감
}))
.catch((err) => {
console.error(err)
console.log("둘 중 하나는 실패했다.")
})
};
// MyPage.jsx 에서 2개의 api 에서 각각 데이터 뽑아와야 하는 경우
// 페이지 렌더링 시 사용자 정보 받아오기
useEffect(() => {
getMyData()
}, [])
// 이름, 생년월일, 주소 받기위한 다중 axios 요청
const getMyData = () => {
const profileData = axios.get(import.meta.env.VITE_BASE_URL + "/api/consumers",
{
headers: {
Authorization: `Bearer ${localStorage.getItem("access-token")}`,
},
})
const addressData = axios.get(import.meta.env.VITE_BASE_URL + "/api/addresses", {
headers: {
Authorization: `Bearer ${localStorage.getItem("access-token")}`,
},
})
Promise.all([profileData, addressData])
.then(axios.spread((res1, res2) => {
setUserInfo({
...userInfo,
name: res1.data.data.name,
anniversaryDate: `${res1.data.data.birthyear}-${(res1.data.data.birthday).slice(0, 2)}-${(res1.data.data.birthday).slice(2)}`,
img: res1.data.data.profileImageUrl,
zipCode: res2.data.data[0].zipCode,
defaultAddr: res2.data.data[0].defaultAddr,
detailAddr: res2.data.data[0].detailAddr
})
}))
.catch((err) => {
console.error(err)
console.log("둘 중 하나 조회 안됌")
})
}