-
카테고리
-
세부 분야
모바일 앱 개발
-
해결 여부
미해결
state 사용에 관하여..
20.12.08 14:17 작성 조회수 232
0
안녕하세요?
질문 답변에 항상 감사드립니다. ..^^
실제 코딩을 하다보니 state 값을 control 하기가 참 힘드네요..ㅠㅠ
현재 회원가입화면에서 이메일주소와, 비밀번호, 확인 비밀번호를 입력받아
올바른 입력인지 체크하는 단계입니다.
그런데, 첫번째, 두번째 비밀번호 입력할때마다 첫번째, 두번째 비밀번호가 같은지 비교하여야하는데,
첫번째 비밀번호를 입력하여 setState 를 하고 바로 state값을 얻어와 2번째 비밀번호와 비교를 해야하는데.
바로 적용된 state 값을 안 넘어오고 이전의 state값이 넘어옵니다. (마지막 입력 글자는 state값으로 바로 안넘어옵니다.)
이럴때는 어떻게 해야하는지 참 난감합니다.
TextInput onChangeText에서 입력값을 setState를 했는데도 다시 state값을 불러오면 바로 반영이 안되어
내부 멤버변수로 그냥 사용을 했습니다.
그런데, 이번에는 err_password 부분도 setState한 부분이 바로 반영이 되질 않습니다.
이것도 멤버변수로 그냥 사용을 해야 하는지,
아님 제가 모르는 부분이 있는지 꼭 답변 부탁드립니다.
소스코드: 클래스 선언 부분)
소스코드: render() 함수 내부
선생님의 경험담을 간절히 기다립니다..
답변을 작성해보세요.
0
![pysoon70님의 프로필](https://cdn.inflearn.com/public/main/profile/default_profile.png?w=48)
pysoon70
질문자2020.12.26
선생님의 경험을 풀어주셔서 감사합니다.
핵심은 state값을 가지고 와서 내부변수로 검증등을 처리하고 마지막에 state 값을 저장하는군요..
소중한 가르침을 주셔서 감사합니다.
가르침대로 잘 적용을 해보도록 하겠습니다.
0
Wintho
지식공유자2020.12.21
pysoon70님,<o:p></o:p>
안녕하세요. 지식공유자 Wintho입니다.<o:p></o:p>
<o:p> </o:p>
문의 주신 내용에 답변 드리겠습니다.<o:p></o:p>
<o:p> </o:p>
로그인 구현도 진행 중이신가 봅니다! 열정에 아낌없는 박수를 보냅니다!! :):)<o:p></o:p>
<o:p> </o:p>
개발자마다 구현하는 방법은 상이할 겁니다.<o:p></o:p>
100명의 개발자가 있다면, 100개의 방법이 존재할 수 있지요.<o:p></o:p>
<o:p> </o:p>
저의 경우를 말씀드리자면, state에는 말 그대로 ‘상태’를 확인하기 위한 변수를 선언합니다.<o:p></o:p>
예를 들면, 로그인의 경우는 ’회원등록인지 로그인인지 단계를 구분하는 인자’, ‘에러가 발생했는지 여부’ 등이 있겠지요.<o:p></o:p>
state에 비밀번호 첫번째/두번째 입력값을 할당해주어도 됩니다만, 첫번째 입력값과 두번째 입력값의 동일 여부 판단을 위해서는 로컬변수를 따로 설정해 두는 것이 편할 듯 보입니다.<o:p></o:p>
제가 잘못 이해했을 수 있습니다만, 패스워드 입력값을 state로 update하는 과정은 checkPasswordValidation 함수 이전이 아닌,<o:p></o:p>
함수 내부 혹은 그 이후의 과정으로 두는 것이 좋을 듯 합니다.<o:p></o:p>
checkPasswordValidation 함수를 이용해서,<o:p></o:p>
1) 첫번째/두번째에 입력되는 패스워드 포맷의 유효성을 검증하신 후,<o:p></o:p>
2) 첫번째 입력값과 두번째 입력값의 동일성을 판단하는 함수를 따로 만들어둔 뒤 호출하셔서<o:p></o:p>
3) 두 입력값의 동일성 여부를 판단하시고<o:p></o:p>
4) state에 최종값을 update하는<o:p></o:p>
방향으로 구현하심이 어떨까 싶습니다.<o:p></o:p>
<o:p> </o:p>
TextInput onChangeText에서 입력값을 setState를 했는데도 다시 state값을 불러오면 바로 반영이 안되어 <o:p></o:p>
내부 멤버변수로 그냥 사용을 했습니다. <o:p></o:p>
그런데, 이번에는 err_password 부분도 setState한 부분이 바로 반영이 되질 않습니다. <o:p></o:p>
=> 예시 코드를 적어봤는데 아래와 같이 시도해 보시길 바랍니다.<o:p></o:p>
<o:p> </o:p>
// state 선언<o:p></o:p>
state = {<o:p></o:p>
form: {<o:p></o:p>
password: {<o:p></o:p>
value:””,<o:p></o:p>
// ~~~<o:p></o:p>
}<o:p></o:p>
confirmPassword: {<o:p></o:p>
value: “”,<o:p></o:p>
// ~~~<o:p></o:p>
}<o:p></o:p>
}<o:p></o:p>
}<o:p></o:p>
<o:p> </o:p>
// render 함수 내부<o:p></o:p>
<View><o:p></o:p>
<Input<o:p></o:p>
// ~~~<o:p></o:p>
onChangeText={value=>this.updateInput(“password”, value)}<o:p></o:p>
/><o:p></o:p>
<o:p> </o:p>
{this.confirmPassword()}<o:p></o:p>
</View><o:p></o:p>
<o:p> </o:p>
// updateInput 함수<o:p></o:p>
updateInput = (name, value) => {<o:p></o:p>
let formCopy = this.state.form;<o:p></o:p>
formCopy[name].value = value;<o:p></o:p>
<o:p> </o:p>
// ~~~~<o:p></o:p>
<o:p> </o:p>
this.setState({<o:p></o:p>
form: formCopy<o:p></o:p>
})<o:p></o:p>
}<o:p></o:p>
<o:p> </o:p>
// confirmPassword 함수<o:p></o:p>
confirmPassword = () => (<o:p></o:p>
<Input<o:p></o:p>
value = {this.state.form.confirmPassword.value}<o:p></o:p>
onChangeText = {value=>this.updateInput(“confirmPassword, value)}<o:p></o:p>
/><o:p></o:p>
)<o:p></o:p>
<o:p> </o:p>
도움 되셨길 바랍니다.<o:p></o:p>
감사합니다.<o:p></o:p>
0
![pysoon70님의 프로필](https://cdn.inflearn.com/public/main/profile/default_profile.png?w=48)
pysoon70
질문자2020.12.18
state 가 비동기로 작동을 한다는걸 알게되었습니다.
그래서 setState한 후에 콜백함수를 사용해야한다는 걸 알게되었습니다.
콜백함수를 사용하는 방법으로 해야하는게 맞는건지요?
답변 3