React 형식 유효성 검사
우리 시대에 회사는 다양한 목적으로 데이터를 저장, 유지 및 분석합니다.
사용자 데이터베이스를 유지 관리하기 위한 것이든 보고서를 생성하기 위한 것이든 간에 데이터의 역할은 아무리 강조해도 지나치지 않습니다. 따라서 데이터는 구조화되고 잘 조직화되어야 합니다.
React로 구동되는 웹 애플리케이션은 사용자 입력이 표준 규칙을 따르는지 확인하기 위해 양식 유효성 검사를 사용해야 합니다. 이러한 방식으로 사용자 여정을 용이하게 하고 체계적인 방식으로 데이터를 수집할 수 있습니다.
잘못된 데이터 유효성 검사는 또한 악의적인 공격으로 이어질 수 있으므로 적절한 솔루션을 구현하면 애플리케이션의 안전성도 높일 수 있습니다.
React 형식 유효성 검사
적절한 React 애플리케이션의 경우 양식 유효성 검사는 필수 기능입니다. 예를 들어 이메일에는 유효한 접미사인 @ 기호가 포함되어야 하며 다른 기준을 충족해야 합니다.
onChange 이벤트
React에서 양식 유효성 검사를 구현하는 가장 효율적인 방법은 onChange 이벤트를 수신하고 구성 요소의 state에서 사용자 입력을 유지 관리하는 것입니다. 먼저 제어된 입력이 있어야 하므로 유효성을 검사할 두 개의 필드(예: 이름 및 이메일)가 있는 경우 다음 빈 값으로 상태를 초기화해야 합니다.
constructor(props){
super(props)
this.state = {
inputFields: {"name": "", "email": ""},
errorMessages: {}
}
}
상태는 클래스 구성 요소를 작성할 때 constructor() 함수에서 초기화되어야 합니다. 또한 errorMessages 속성을 사용하는 것이 좋습니다. 여기에서 메시지를 저장하여 사용자에게 입력된 값의 문제를 알릴 수 있습니다.
양식 유효성 검사의 첫 번째 단계는 onChange 이벤트 리스너로 <input> 요소를 설정하는 것입니다. 입력 필드의 변경 사항은 상태에도 자동으로 반영됩니다.
render() 메서드는 다음과 같아야 합니다.
render() {
return (
<form>
<input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
<br />
<input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
</form>
)
}
이것은 훌륭한 시작입니다. 여전히 양식 유효성 검사를 위한 조건을 설정하고 오류 메시지를 생성해야 합니다. 이를 위해 맞춤형 validate() 함수를 생성합니다.
간단하게 하기 위해 두 가지 기본 규칙을 설정할 것입니다. 이름은 2자보다 길어야 하고 이메일 값은 @를 포함해야 합니다. 이제 전체 애플리케이션은 다음과 같아야 합니다.
class App extends Component {
constructor(props){
super(props)
this.state = {
inputFields: {"name": "", "email": ""},
errorMessages: {}
}
}
render() {
console.log(this.state)
const validate = () => {
let inputFields = this.state.inputFields
let errors = {}
let validityStatus = true
if (inputFields["name"].length <= 2){
validityStatus = false
errors["name"] = "The name should contain more than two symbols"
}
if (inputFields["email"].indexOf("@") === -1 ){
validityStatus = false
errors["email"] = "The email should contain @"
}
this.setState({errorMessages: errors})
return validityStatus
}
const handleSubmit = (e) => {
e.preventDefault();
if (validate()){
alert("form complete")
}
else {
alert("errors")
}
}
return (
<form onSubmit={(e) => handleSubmit(e)}>
<input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
<br />
<input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
<br />
<button type="submit">Submit</button>
</form>
)
}
}
양식이 제출되면 validate() 함수는 필드에 입력된 값을 확인하고 모든 조건이 충족되면 true를, 그렇지 않으면 false를 반환합니다. 확인이 끝나면 handleSubmit() 함수는 form complete 또는 errors를 경고합니다.
이 함수는 또한 각 텍스트 필드에 대한 경고 메시지를 저장하는 로컬 errors 변수를 포함합니다. 확인이 완료되면 변수를 참조하여 errorMessages 상태 속성을 업데이트합니다.
편의를 위해 각 필드 아래에 해당 필드에 대한 오류 메시지를 표시할 텍스트를 추가할 수 있습니다. 다음은 예입니다.
return (
<form onSubmit={(e) => handleSubmit(e)}>
<input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
<p style={{color: "red"}}>{this.state.errorMessages.name}</p>
<br />
<input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
<p style={{color: "red"}}>{this.state.errorMessages.email}</p>
<br />
<button type="submit">Submit</button>
</form>
)
이렇게 하면 errorMessages 상태 속성의 경고 메시지를 사용하여 사용자에게 오류를 수정하는 데 도움이 되는 유용한 사소한 경고를 제공할 수 있습니다.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn