[React] - 13) onSubmit/onClick의 차이

onSubmit / onClick

 

리액트에서 이벤트를 처리할 때, 그동안은 보통 onClick을 사용했습니다.

 

하지만 리액트에서는 종종 onSubmit을 사용하기도 합니다. 한번 그 차이를 알아볼까요?

 

우선 onClick으로 구현한 코드를 봅시다.

 

함수형 컴포넌트를 생성하고 다음과 같이 작성해 볼까요?

import React, {useState} from 'react';

const CompareSubmitClick = (props) => {
    const [number, setNumber] = useState(0);
    const onClick = () => {
        setNumber(number + 1);
    }
    return (
        <div>
            <p>{number}</p>
            <button onClick={onClick}>클릭!</button>
        </div>
    );
};

export default CompareSubmitClick;

가장 단순한 버튼 클릭 이벤트 구현이라고 할 수 있겠습니다.

 

yarn start로 서버를 구동하고 버튼을 클릭해 봅시다.

숫자가 정상적으로 올라가나요?

 

 

그 다음에는, onSubmit으로 구현해 보겠습니다.

 

코드를 다음과 같이 수정해 볼까요?

import React, {useState, useCallback} from 'react';

const CompareSubmitClick = (props) => {
    const [number, setNumber] = useState(0);
    const onSubmit = useCallback(
        e => {
            setNumber(number + 1);
        },
        [number]
    )
    return (
        <div>
            <form onSubmit={onSubmit}>
                <input />
                <p>{number}</p>
                <button type="submit">클릭!</button>
            </form>

        </div>
    );
};

export default CompareSubmitClick;

그리고 서버를 구동해 봅시다.

버튼을 눌렀을 때 숫자가 올라가는 것 처럼 보이지만, 새로고침에 의해 사라지게 될 겁니다.

 

그 이유는 onSubmit은 기본적으로 호출될 때 페이지를 새로고침하는 효과가 있기 때문입니다.

 

리액트 로컬 서버 구동시 새로고침을 하면 프로젝트를 다시 시작하기 때문에 number가 0으로 초기화되는 것입니다.

 

그렇다면 굳이 onSubmit을 사용하는 이유가 무엇일까요?

 

우선 onSubmit 호출 시 새로고침이 되지 않도록 다음 코드를 추가해 줍시다.

 

...
    const onSubmit = useCallback(
        e => {
            setNumber(number + 1);
            e.preventDefault(); // 추가
        },
        [number]
    );
...   

export default CompareSubmitClick;

 

다음 코드를 추가 시 onSubmit이 호출되어도 새로고침이 되지 않게 됩니다.

 

다시 서버를 구동하고 이번에는 만들어 놓은 input위에 커서를 올려놓고 엔터를 눌러보세요.

input에 포커스를 두고 엔터를 눌러도 숫자가 올라가는걸 확인하셨나요?

 

 

이처럼 onSubmit은 form에 묶어놓고 사용 시, form 내부의 컴포넌트에 focus를 주었을 때, 엔터를 눌러도 onSubmit을 호출하게 됩니다.

 

onClick으로 구현시에는 onKeyPress같은 이벤트를 따로 추가해서 키 입력을 받아야하는 불편함이 있겠죠.

 

이처럼 onSubmit과 onClick은 비슷한 듯 다른 점이 있습니다.

 

적용해야 할 상황에 따라 구분하여 적용하면 더 효과적으로 리액트 코드를 짤 수 있겠네요!