이번 강의영상에서는 useState를 사용하여 상태 변수를 선언하고, setter 함수를 호출하여 값을 업데이트했다.
https://www.youtube.com/watch?v=3oha309vG1M&t=3s

상태 변수 선언

강의 영상에서는 휴대폰 번호를 입력하도록 했다. 그러기 위해서

const [Email, setEmail] = useState('');

를 작성해주었는데, 나는 이메일을 사용해야 하기 때문에 이메일로 바꿔줬다. 초기값은 그냥 낫띵!

그리고 TextInput의 onChangeText 함수에서 setEmail(value)를 작성해주었다!

onChangeText={(value) => {
                    console.log(value)
                    setEmail(value)
                    console.log(Email)
                }}

이렇게 작성했는데 영상에서도 언급했듯이 다음과 같은 현상이 발생했다. 입력 필드에 123456을 입력했을 때 로그가 다음과 같이 출력됐다.

보면 그냥 텍스트가 변경될 때의 value값은 바로바로 들어가는데, 상태변수에는 하나씩 늦게(?) 들어가는 것을 볼 수 있다.

이에 대해서 알아보니 React에서는 상태를 업데이트할 때, 여러 업데이트 요청을 모아서 한 번에 처리하는 배치 처리를 이용하기 때문에 비동기적으로 처리되기 때문이었다. 업데이트는 다음 렌더링 사이클에서 일괄적으로 처리가 된다.

console.log(value)는 즉시 입력한 값을 출력하지만, console.log(Email)에서는 아직 이전 상태를 참고하고 있으므로, 업데이트된 값이 아닌 이전 값을 출력한다.

상태는 정상적으로 업데이트되지만, 그 결과를 바로 확인할 수 없는 것이다!

이건 궁금해서 물어본건데, 만약 console.log(Email) 대신에 Email 변수를 다른 곳으로 넘긴다거나 이러한 함수를 사용한다면 useEffect 훅을 사용하는게 좋다고 한다. Email 값이 변경될 때마다 최신값을 사용할 수 있기 때문이다.

강의자분은 이것을 어떻게 해결할 것인지...!!!

정리

React는 비동기식으로 처리된다는 것을 알게 되었다!