[React] Input - submit - form 구현하기 [리로딩 방지 외]

목표

input에 있는 내용을 submit 하였을 때 리로딩을 방지하고 input값을 제대로 전달한다.

---

InputForm.js 파일 생성 후 아래와 같이 기본 내용을 마크업한다.

** InputForm.js **

import React from 'react';

const InputForm = () => {
	return(
    	<form>
            <label>
            	이름 :
                <br />
                <input type="text" name="name" />
            </label>
        </form>
    )
}

export default InputForm;

 

 

Input에 내 이름을 입력하고 <작성> 버튼을 클릭했을때 내가 입력한 input 값이 제대로 넘어가는지가 궁금했다!

일단 input 상태를 먼저 변화시키자.

const [text, setText] = useState('');

const onChange = (e) => {
	setText(e.target.value);
}

.
.생략
.
<label>
	이름 : {text}
	<br />
	<input type="text" name="name" value={text} onChange={onChange}/>
</label>

일단 Input의 상태값을 바꾸려면 useState를 사용하여 Input값을 관리해야 한다.

onChange 함수에 들어있는 e.target.value의 값이 setText 값을 정의하게 된다.

 

이후에 작성버튼을 눌렀을 경우 alert 창에 내가 input에 입력한 값이 출력되도록 설정하려고 한다.

const onSubmit=(e)=>{
	e.preventDefault(); //리로딩 이벤트 제거
    alert(`이름 : ${text}`)
}

.
.
.

<form onSubmit={onSubmit}>
	...생략
</form>

 

완료후 input에 값을 넣고 작성버튼을 누르면 리로딩없이 제대로 입력된것을 확인할수있다.

---

코드 전체

import React, { useState } from 'react'

const InputForm = ()=>{
    const [text, setText] = useState('')
    
    const onChange =(e)=>{
        setText(e.target.value);
    }

    const onSubmit =(e)=>{
        e.preventDefault();
        alert(`이름: ${text}`);
    }

    return(
        <form onSubmit={onSubmit}>
            <label>
                이름 : {text}
                <br />
                <input type="text" name="name" value={text} onChange={onChange}/>
            </label>
            <button type="submit">작성</button>
        </form>
    )   
}

export default InputForm;