5. Form

프로젝트를 진행 할 때 form작업을 자주 하게 된다.

CDN을 활용해서 리액트에서 폼을 만들 때 유용한 정보를 아래에 정리해보았다.

Form submit

사용자가 폼을 제출 할 때 특정 사이트(ex.여기어때)로 연결하여

검색값을 받아 올 수 있게 하려면 input의 name 프로퍼티를 활용 할 수 있다.

 

 

input에 name 속성을 활용 할 때는 key를 설정해야한다.

설정하는 key 이름은
폼을 제출(submit) 할 때 실행되는 action 주소의 쿼리스트링에 따라 달라진다.
아래와 같은 경우는 물음표('?') 뒤 쿼리스트링이 'keyword'이기 때문에
input name프로퍼티의 value값을 'keyword'로 설정하면 된다.

 

이렇게 하면 쿼리스트링의 key값으로 keyword가 지정되고
value값도 변수를 useState를 통해 지정해주면
input값이 place(value값)값이 된다.

'use strict';

const root = document.getElementById('root')

function App() {
    const [place, setPlace] = React.useState('')

    const handleChange = (e) => {
        setPlace(e.target.value);
    }

    return (
        <form method="get" action={`https://www.goodchoice.kr/product/result?keyword=${place}`}>
            <input type="text" placeholder="가고 싶은 여행지를 입력해주세요" value={place} name="keyword" onChange={handleChange} />
            <input type="submit" />
        </form>
    )
}

ReactDOM.render(<App />, root)

Form 자동 제출 막는 법

form이 제출 될 때 자동 제출되면
input의 값도 리셋이 된다.
자동 제출되는 것을 막으면 input값을 리셋되는 것으로부터 막고 상태관리를 할 수 있다.

아래는 총 2가지의 방법을 활용했다.

 

1. 폼에 onSubmit속성에 "return false"값을 지정

=> 제출 버튼이 input 태그일 때 활용 할 수 있다.

2. input 태그 대신에 button 태그 활용
=> input태그 대신에 button 태그를 활용하면 쉽게 form 자동제출을 방지 할 수 있다.

'use strict';
const root = document.getElementById('root')

function App() {
    const [id, setId] = React.useState('')
    const [pw, setPw] = React.useState('')
    
    const handleIdChange = (e) => {
        setId(e.target.value);
    }
    const handlePwChange = (e) => {
        setPw(e.target.value);
    }

    const login = (e) => {
        console.log("id", id);
        console.log("pw", pw);
    }

    return (
        <>
      //  폼에 onSubmit속성에 "return false"값을 지정하는 방법
            <form onSubmit="return false">
                <input type="text" placeholder="아이디를 입력해주세요" value={id} onChange={handleIdChange} />
                <input type="password" placeholder="비밀번호를 입력해주세요" value={pw} onChange={handlePwChange} />
                <input type="button" onClick={login} value="login" />
            </form >
	// input 태그 대신에 button 태그 활용
            <form>
                <input type="text" placeholder="아이디를 입력해주세요" value={id} onChange={handleIdChange} />
                <input type="password" placeholder="비밀번호를 입력해주세요" value={pw} onChange={handlePwChange} />
                <button type="button" onClick={login} >login</button>
            </form >

        </>
    )
}

ReactDOM.render(<App />, root)