• 목차

개요

• Http 통신용 앱으로 **Firebase (Realtime Daatabase)**를 사용하였습니다.
  • 생성된 URL 를 통해 request 를 보내면 Firebase API 를 통해 Daatabase 에 저장이 된다.
• Form 데이터를 prop 를 이용해 다른 컴포넌트로 포워딩하고 HTTP 통신을 하였다.

NewMeetupForm.js

function NewMeetupForm(props) {
    const titleInputRef = useRef();
    const imageInputRef = useRef();
    const addressInputRef = useRef();
    const descriptionInputRef = useRef();

    function submitHandler(event) {
        event.preventDefault();

        const enteredTitle = titleInputRef.current.value;
        const enteredImage = imageInputRef.current.value;
        const enteredAddress = addressInputRef.current.value;
        const enteredDescription = descriptionInputRef.current.value;

        const meetupData = {
            title: enteredTitle,
            image: enteredImage,
            address: enteredAddress,
            description: enteredDescription,
        };

        props.onAddMeetup(meetupData);
    }

    return (
        <Card>
            <form className={classes.form} onSubmit={submitHandler}>
                ...
            </form>
        </Card>
    );
}

export default NewMeetupForm;

• Form 데이터를 prop 를 이용해 포워딩 시킨다.

NewMeetup.js

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

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

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

export default NewMeetupsPage;

• 나중에 NewMeetupForm 함수가 실행될 때 meetupData 를 addMeetupHandler 로 전달한다.
• fetch API 를 통해서 POST 요청을 진행하였다.