Material UI - <TextField>
TextField는 input 태그 api이다.
TextField api안에는 error props가 있다.
error인 경우에 input 창을 테두리를 빨간색으로 표시해 주는 기능이다.
이렇게 error 조건이 false가 되면 빨간 색상이 사라진다.
input창 아래에 있는 것도 props로 사용할 수 있는 것인데,
helperText로 사용하면 된다.
<div>
<TextField
error={body.length < 5 ? true : false}
id='standard-error-helper-text'
label='내용'
value={body}
helperText='5글자 이상 입력해 주세요'
variant='standard'
onChange={onChangeBodyHandler}
margin='normal'
sx={{ width: "300px" }}
/>
</div>
<StFlexDiv>
<TextField
error={kcal.length < 1 ? true : false}
id='standard-error-helper-text'
label='오늘 소모한 칼로리'
value={kcal}
type='number'
helperText='숫자를 입력하세요'
variant='standard'
onChange={onChangeKcalHandler}
margin='normal'
sx={{ width: "300px" }}
/>
<Typography variant='h6'>kcal</Typography>
</StFlexDiv>
<StFlexDiv>
<TextField
error={exerciseHour.length < 1 ? true : false}
id='standard-error-helper-text'
label='오늘 운동한 시간'
value={exerciseHour}
type='number'
helperText='숫자를 입력하세요'
variant='standard'
onChange={onChangeExerciseHourHandler}
margin='normal'
sx={{ width: "300px" }}
/>
<Typography variant='h6'>분</Typography>
</StFlexDiv>
위의 방식처럼
error ={ 조건식 } 으로 작성해서 사용할 수 있다.
true나 false 값으로 return 되는 것이면 된다!
helperText에는
문자열을 직접 넣어도 되고,
return값이 문자열인 함수를 넣어도 된다.
그래서 회원가입의 경우 유효성 체크 조건이 조금 더 복잡하기 때문에
error와 helperText에 함수를 넣어서 사용했다.
<TextField
error={validateEmailBool(email) ? false : true}
id='standard-error-helper-text'
label='아이디'
value={email}
helperText={validateEmail(email)}
variant='standard'
onChange={onChangeEmailHandler}
margin='normal'
sx={{ width: "300px" }}
/>validateEmailBool 함수는 email이 중복되진 않는지,
email 형식에 맞게 작성되었는지 체크하는 함수로 return값이 불리언타입이다.
함수로 유효성 검증을 하고, 가입이 가능할 경우 true를 반환하므로 ? false : true로 표현했다.
그런데 지금 생각해보니 그냥 함수 앞에 !만 붙여서 표현하면 될 것 같다.
validateEmail은 return값이 스트링이다.
각 조건에 따라
"사용 가능한 이메일입니다"
"이미 사용중인 이메일입니다"
"이메일 형식에 맞게 입력해 주세요"
를 return한다.
