• 목차

개요

• 사용자의 요청이 있을 때 작업이 제대로 완료되었다는 피드백을 제공해보자.
• Form 데이터를 제출하고 다른 메뉴로 이동하는 기능을 구현해보자.

NewMeetups.js

import {useHistory} from 'react-router-dom';

import NewMeetupForm from "../component/meetups/NewMeetupForm";

function NewMeetupsPage() {
    const history = useHistory();

    function addMeetupHandler(meetupData) {
        fetch(
            '<https://database-default-rtdb.firebaseio.com/meetups.json>',
            {
                method: 'POST',
                body: JSON.stringify(meetupData),
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        ).then(() => {
            history.replace('/');
        });
    }

    return (
        <section>
            <h1>New Meetups Page</h1>
            <NewMeetupForm onAddMeetup={addMeetupHandler}/>
        </section>
    );
}

export default NewMeetupsPage;

• useHistory 훅은 history 객체를 반환한다.
• 이 객체는 브라우저의 검색 기록을 조작하는 데 필요한 특정 메소드를 보여주는 기능을 한다.
• replace 를 통해 루트(/) URL 로 location 할 수 있으며, 이동 후에는 뒤로 가기가 불가 하다.