Form 양식 추가하기 - useRef

개요

해당 프로젝트의 목표는 다음과 같다.
1. Add New Meetup 를 누르면 meetup 에 대한 데이터를 입력할 양식이 뜨고, 더미 데이터와 같은 데이터를 입력
2. 입력된 데이터를 백엔드 서버로 보내서 DB 에 저장하고, 값을 가져와서 AllMeetup 에 로딩
3. 페이지가 Reload 되어도 DB 에 데이터가 저장되어 있기 때문에 보여진다. (휘발성 X)
이번에는 NewMeetup.js 에 양식을 추가해보자.

NewMeetup.js

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

function NewMeetupsPage() {
    return (
        <section>
            <h1>New Meetups Page</h1>
            <NewMeetupForm />
        </section>
    );
}

export default NewMeetupsPage;

NewMeetupForm.js

import classes from './NewMeetupForm.module.css'
import Card from "../ui/Card";

function NewMeetupForm() {
    return (
        <Card>
            <form className={classes.form}>
                <div className={classes.control}>
                    <label htmlFor={"title"}>Meetup Title</label>
                    <input type={"text"} required={true} id={"title"} />
                </div>
                <div className={classes.control}>
                    <label htmlFor={"image"}>Meetup Image</label>
                    <input type={"url"} required={true} id={"image"} />
                </div>
                <div className={classes.control}>
                    <label htmlFor={"address"}>Meetup Address</label>
                    <input type={"text"} required={true} id={"address"} />
                </div>
                <div className={classes.control}>
                    <label htmlFor={"description"}>Meetup Address</label>
                    <textarea id={"description"} required={true} rows={'5'}></textarea>
                </div>
                <div className={classes.actions}>
                    <button>Add Meetup</button>
                </div>
            </form>
        </Card>
    );
}

export default NewMeetupForm;

Card wrapper 컴포넌트를 사용하여 card CSS Class 를 적용하였다.
Form 양식을 만들었습니다.

사용자 입력 받기 및 양식 제출 처리하기

import classes from './NewMeetupForm.module.css'
import Card from "../ui/Card";
import {useRef} from "react";

function NewMeetupForm() {
    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,
        };

        console.log(meetupData);
    }

    return (
        <Card>
            <form className={classes.form} onSubmit={submitHandler}>
                <div className={classes.control}>
                    <label htmlFor={"title"}>Meetup Title</label>
                    <input type={"text"} required={true} id={"title"} ref={titleInputRef} />
                </div>
                <div className={classes.control}>
                    <label htmlFor={"image"}>Meetup Image</label>
                    <input type={"url"} required={true} id={"image"} ref={imageInputRef}/>
                </div>
                <div className={classes.control}>
                    <label htmlFor={"address"}>Meetup Address</label>
                    <input type={"text"} required={true} id={"address"} ref={addressInputRef}/>
                </div>
                <div className={classes.control}>
                    <label htmlFor={"description"}>Meetup Address</label>
                    <textarea id={"description"} required={true} rows='5' ref={descriptionInputRef}></textarea>
                </div>
                <div className={classes.actions}>
                    <button>Add Meetup</button>
                </div>
            </form>
        </Card>
    );
}

export default NewMeetupForm;

submit 감지를 할 수 있어야 한다.
- onSubmit prop 을 이용하여 로직을 실행할 수 있다.
브라우저는 디폴트로 HTTP request 를 보내고 페이지를 Reload 하지 않아야 한다.
- 우리는 HTTP request 를 보내지만 페이지를 Reload 하지 않고 내부적으로 처리해야 한다.
- 그러므로 브라우저의 기본 동작을 차단해야 한다.
- onClick, onSubmit 등의 모든 기본 이밴트들은 캡쳐할 수 있다.
- 리액트는 함수에 자동으로 event 인자를 넘겨서 해당 이밴트들을 실행하게 한다.
- 그리고 event.preventDefault() 함수로 기본 동작을 차단할 수 있다.
- 이것은 바닐라 자바스크립트의 기능이며, 리액트도 지원된다.
useRef 훅은 DOM element 로 reference 를 설정할 수 있게 해준다.
- DOM element 에 직접적으로 액세스가 가능하다.
ref prop 는 모든 element 에서 사용할 수 있는 내장형 prop 이다.
- ref 객체를 통해 <input> element 로 접근할 수 있다.
userRef() 로 생성된 모든 ref 객체는 current 속성을 가지고 있고 이에 연결된 값이 있다.

npm start

Untitled