[React] Form 이벤트 처리하기

React에서 사용자의 입력을 받아 처리할 때는 form과 이벤트를 함께 사용하는 경우가 많다.

이번에는 간단한 Todo 리스트 등록 기능을 구현하면서 form의 onSubmit 이벤트와 preventDefault()를 사용하는 방법을 정리했다.

1. form의 onSubmit 이벤트

HTML의 form에서 등록 버튼을 누르면 submit 이벤트가 발생한다.

React에서는 onSubmit을 사용해 이벤트를 처리할 수 있다.

<form
    onSubmit={() => {}}
>
    <input
        type="text"
        name="todo"
        placeholder="할 일을 등록해주세요"
    />

    <input type="submit" value="등록" />
</form>

onSubmit에 함수를 등록하면 사용자가 form을 제출했을 때 해당 함수가 실행된다.

2. 이벤트 객체 e

이벤트가 발생하면 React는 이벤트 정보를 담은 이벤트 객체를 전달한다.

관례적으로 e 또는 event라는 이름을 사용한다.

onSubmit={(e) => {
    console.log(e);
}}

이벤트 객체를 이용하면 어떤 요소에서 이벤트가 발생했는지 등의 정보를 확인할 수 있다.

3. e.preventDefault()

form을 제출하면 브라우저는 기본적으로 form을 전송하고 페이지를 새로고침한다.

React에서 페이지 이동이나 새로고침 없이 직접 데이터를 처리하고 싶다면 기본 동작을 막아야 한다.

onSubmit={(e) => {
    e.preventDefault();

    console.log("submit");
}}

e.preventDefault()는 이벤트의 기본 동작을 막는 메서드이다.

Todo 리스트에서는 페이지를 새로고침하지 않고 React의 State를 변경해야 하기 때문에 사용한다.

4. input의 값 가져오기

input에는 name을 지정할 수 있다.

<input
    type="text"
    name="todo"
    placeholder="할 일을 등록해주세요"
/>

이렇게 name을 지정하면 form을 통해 해당 input의 값을 가져올 수 있다.

onSubmit={(e) => {
    e.preventDefault();

    const form = e.target;
    const value = form.todo.value;

    console.log(value);
}}

여기서

const form = e.target;

은 이벤트가 발생한 form을 가져오는 것이다.

const value = form.todo.value;

를 통해 name="todo"인 input의 입력값을 가져올 수 있다.

5. 이벤트 핸들러를 함수로 분리하기

이벤트 처리 코드가 길어지면 JSX 내부에 직접 작성하기보다 별도의 함수로 분리하는 것이 좋다.

const onSubmitHandle = (e) => {
    e.preventDefault();

    const form = e.target;
    const value = form.todo.value;

    console.log(value);
};

그리고 form에서 함수를 연결한다.

<form onSubmit={onSubmitHandle}>
    <input
        type="text"
        name="todo"
        placeholder="할 일을 등록해주세요"
    />

    <input type="submit" value="등록" />
</form>

이렇게 하면 JSX가 간결해지고 이벤트 처리 로직도 별도로 관리할 수 있다.