[React] FITPET : 숙소 상세보기 API 연동하기
숙소 상세보기 페이지는 숙소 리스트 페이지에서 상세보기 버튼을 클릭하면 이동하게 되는 페이지 입니다. 상세보기 버튼에 불러올 숙소의 id값을 넣어줘 id값과 일치한 데이터들을 불러오도록 구현하였습니다.
1. HotelService.js에 getHotelAbout() 추가하기.
services 폴더에 HotelService.js 파일을 만들고 여기에 숙소 페이지 내에서 불러오는 모든 API 를 관리합니다.
상세보기 페이지를 관리할 getHotelAbout()
을 추가해줍니다.
HotelService.js
import axios from 'axios';
export default class HotelService {
// 호텔 리스트
static async getHotelList(page) {
const response = await axios.get(`/api/lodging/list/?nowPage=${page}`);
return response;
}
// 호텔 상세보기 (객실 정보)
static async getHotelAbout(hotelId) {
const response = await axios.get(`/api/lodging/${hotelId}`);
return response;
}
}
2. hotelAbout.js에서 reducer, action, saga 관리하기
redux > modules 폴더 안에 hotelAbout.js 파일을 생성하여 reducer, action, saga를 관리합니다.
hotelAbout.js
import { call, put, takeEvery } from '@redux-saga/core/effects';
import HotelService from '../../services/HotelService';
import { hotelListFail, hotelListSaga, hotelListStart } from './hotelList';
// namespace
const namespace = 'fitpet/hotelAbout';
// action types
const START = namespace + '/START';
const SUCCESS = namespace + '/SUCCESS';
const FAIL = namespace + '/FAIL';
// initiall state
const initalState = { hotelAbout: [], error: null };
// reducer
export default function hotelAbout(state = initalState, action) {
switch (action.type) {
case START:
return { hotelAbout: [], errer: null };
case SUCCESS:
return { ...state, hotelAbout: action.hotelAbout };
case FAIL:
return { ...state, error: action.error };
default:
return state;
}
}
// action creators
export const hotelAboutStart = () => ({ type: START });
export const hotelAboutSuccess = (hotelAbout) => ({
type: SUCCESS,
hotelAbout,
});
export const hotelAboutFail = (error) => ({ type: FAIL, error });
// saga
const HOTEL_ABOUT_SAGA = namespace + '/HOTEL_ABOUT_SAGA';
export function* hotelAboutSaga(action) {
try {
yield put(hotelListStart());
const response = yield call(HotelService.getHotelAbout);
yield put(hotelAboutSuccess(response.data));
} catch (error) {
yield put(hotelListFail(error));
}
}
// watch saga
export function* watchHotelList() {
yield takeEvery(HOTEL_ABOUT_SAGA, hotelListSaga);
}
HotelAboutContainer.jsx에 추가해줍니다.
import React, { useCallback } from 'react';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import HotelAbout from '../components/hotel/hotel_about/HotelAbout';
import { closeRoomDetail, openRoomDetail } from '../redux/modules/modal';
const HotelAboutContainer = () => {
const dispatch = useDispatch();
const roomDetailOpen = useSelector((state) => state.modal.roomDetailOpen);
**const hotelaboutInfo = useSelector(
(state) => state.hotelAbout.hotelaboutInfo,
);**
// 객실 상세 창 열기
const showRoomDetail = useCallback(() => {
dispatch(openRoomDetail());
}, [dispatch, roomDetailOpen]);
// 객실 상세 창 닫기
const hideRoomDetail = useCallback(() => {
dispatch(closeRoomDetail());
}, [dispatch]);
useEffect(() => {
if (roomDetailOpen) {
document.body.style.cssText = `
position:fixed;
top: -${window.scrollY}px;
overflow-y: scroll;
width: 100%;
`;
}
return () => {
const scrollY = document.body.style.top;
document.body.style.cssText = '';
window.scrollTo(window.scrollY, parseInt(scrollY || '0', 10) * -1);
};
}, [roomDetailOpen]);
return (
<HotelAbout
**hotelaboutInfo={hotelaboutInfo}**
showRoomDetail={showRoomDetail}
roomDetailOpen={roomDetailOpen}
hideRoomDetail={hideRoomDetail}
/>
);
};
export default HotelAboutContainer;
Author And Source
이 문제에 관하여([React] FITPET : 숙소 상세보기 API 연동하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@97godo/React-FITPET-숙소-상세보기-API-연동하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)