[React] useState와 조건문 활용하여 input 에러 검증하기
in React
코드캠프에서 2일차 과제로 state 사용하여 input value를 검토하는 과제가 주어졌다.
- react hook의 useState를 사용하여 각 input 태그와 해당 input에 연결된 error text를 state로 저장한다.
- onChange event를 사용하여 input의 값이 변경될 때마다 setState로 변경된 값을 저장한다.
- onChange event 안에 조건문을 작성하여, input에 값이 작성되면 input 연결된 error의 state를 빈 값으로 초기화 된다.
- 등록하기 버튼에 onClick event를 적용하여 버튼 클릭시 모든 input에 값이 작성되어 있는지 확인한다.
코드를 작성하면서 input radio는 하나만 check 되어도 값이 작성된거기 때문에, redio check 여부를 true, false로 만들어 객체에 담아주었다. 그 값을 활용하여 조건문으로 에러를 검증했다.
import { useState } from "react";
import {
Address,
ButtonWrapper,
Contents,
ImageWrapper,
InputWrapper,
Label,
OptionWrapper,
Password,
RadioButton,
RadioLabel,
SearchButton,
Subject,
SubmitButton,
Title,
UploadButton,
Wrapper,
Writer,
WriterWrapper,
Youtube,
Zipcode,
ZipcodeWrapper,
Error,
} from "../../styles/emotion";
export default function BoardWriteUI() {
// 입력 데이터 state로 저장하기, 빈칸이라면 에러메세지가 나오도록 검증하기
const [writer, setWriter] = useState("");
const [password, setPassword] = useState("");
const [subject, setSubject] = useState("");
const [contents, setContents] = useState("");
const [zipcode, setZipcode] = useState("");
const [youtube, setYoutube] = useState("");
const [radioYoutube, setRadioYoutube] = useState(false);
const [radioPhoto, setRadioPhoto] = useState(false);
const [errorWriter, setErrorWriter] = useState("");
const [errorPassword, SetErrorPassword] = useState("");
const [errorSubject, setErrorSubject] = useState("");
const [errorContents, setErrorContents] = useState("");
const [errorZipcode, setErrorZipcode] = useState("");
const [errorYoutube, setErrorYoutube] = useState("");
const [errorRadioCheck, setErrorRadioCheck] = useState("");
function onChangeWrite(e) {
const value = e.target.value;
setWriter(value);
// value => value !== ""
if (value) {
setErrorWriter("");
}
}
function onChangePassword(e) {
const value = e.target.value;
setPassword(value);
if (value) {
SetErrorPassword("");
}
}
function onChangeSubject(e) {
const value = e.target.value;
setSubject(value);
if (value) {
setErrorSubject("");
}
}
function onChangeContent(e) {
const value = e.target.value;
setContents(value);
if (value) {
setErrorContents("");
}
}
function onChangeZipcode(e) {
const value = e.target.value;
setZipcode(value);
if (value) {
setErrorZipcode("");
}
}
function onChangeYoutube(e) {
const value = e.target.value;
setYoutube(value);
if (value) {
setErrorYoutube("");
}
}
// 이부분을 객체로 만들어서 초기값 false 체크시 true로 변경
const isRadioChecked = {
radioYoutube,
radioPhoto,
};
function onChangeRadioYoutube(e) {
const value = e.target.value;
setRadioYoutube(true);
setRadioPhoto(false);
if (value) {
setErrorRadioCheck("");
}
}
function onChangeRadioPhoto(e) {
const value = e.target.value;
setRadioPhoto(true);
setRadioYoutube(false);
if (value) {
setErrorRadioCheck("");
}
}
console.log(isRadioChecked);
function onClickCheck() {
// !writer => writer === ""
if (!writer) {
setErrorWriter("!작성자를 입력하세요");
}
if (!password) {
SetErrorPassword("!비밀번호를 입력하세요");
}
if (!subject) {
setErrorSubject("!제목을 입력하세요");
}
if (!contents) {
setErrorContents("!제목을 입력하세요");
}
if (!zipcode) {
setErrorZipcode("!주소를 입력하세요");
}
if (!youtube) {
setErrorYoutube("!링크를 입력하세요");
}
if (!radioYoutube && !radioPhoto) {
setErrorRadioCheck("!버튼을 체크하세요");
}
// radio가 체크되면 error 메세지가 빈 값이 되는 걸 사용하여, input radio 체크여부 확인
if (
writer &&
password &&
subject &&
contents &&
zipcode &&
youtube &&
!errorRadioCheck
) {
alert("게시글이 등록되었습니다.");
}
}
return (
<Wrapper>
<Title>게시글 등록</Title>
<WriterWrapper>
<InputWrapper>
<Label>작성자</Label>
<Writer
type="text"
placeholder="이름을 적어주세요."
onChange={onChangeWrite}
/>
</InputWrapper>
<InputWrapper>
<Label>비밀번호</Label>
<Password
type="password"
placeholder="비밀번호를 작성해주세요."
onChange={onChangePassword}
/>
</InputWrapper>
</WriterWrapper>
<Error>{errorWriter}</Error>
<Error>{errorPassword}</Error>
<InputWrapper>
<Label>제목</Label>
<Subject
type="text"
placeholder="제목을 작성해주세요."
onChange={onChangeSubject}
/>
</InputWrapper>
<Error>{errorSubject}</Error>
<InputWrapper>
<Label>내용</Label>
<Contents
placeholder="내용을 작성해주세요."
onChange={onChangeContent}
/>
</InputWrapper>
<Error>{errorContents}</Error>
<InputWrapper>
<Label>주소</Label>
<ZipcodeWrapper>
<Zipcode placeholder="07250" onChange={onChangeZipcode} />
<SearchButton>우편번호 검색</SearchButton>
</ZipcodeWrapper>
<Address />
<Address />
</InputWrapper>
<Error>{errorZipcode}</Error>
<InputWrapper>
<Label>유튜브</Label>
<Youtube
placeholder="링크를 복사해주세요."
onChange={onChangeYoutube}
/>
</InputWrapper>
<Error>{errorYoutube}</Error>
<ImageWrapper>
<Label>사진첨부</Label>
<UploadButton>+</UploadButton>
<UploadButton>+</UploadButton>
<UploadButton>+</UploadButton>
</ImageWrapper>
<OptionWrapper>
<Label>메인설정</Label>
<RadioButton
type="radio"
id="youtube"
name="radio-button"
onChange={onChangeRadioYoutube}
/>
<RadioLabel htmlFor="youtube">유튜브</RadioLabel>
<RadioButton
type="radio"
id="image"
name="radio-button"
onChange={onChangeRadioPhoto}
/>
<RadioLabel htmlFor="image">사진</RadioLabel>
</OptionWrapper>
<Error>{errorRadioCheck}</Error>
<ButtonWrapper>
<SubmitButton onClick={onClickCheck}>등록하기</SubmitButton>
</ButtonWrapper>
</Wrapper>
);
}
}
