더북(TheBook)

이 코드에서는 useState를 사용해 문자열 타입의 text라는 상태를 만들었습니다. 그리고 TextInput 컴포넌트에 valueonChangeText Props를 설정했습니다.

valueTextInput에서 보여줘야 할 값을 가리킵니다. 이렇게 value 값을 설정하면 추후 사용자 입력이 아닌 다른 경로를 통해 text 값을 임의로 바꾸게 됐을 때 새로운 값을 TextInput에 반영시킬 수 있습니다. (예를 들어, 새로운 항목을 추가한 뒤에는 text 값을 비워야 합니다. setText를 통해서 값을 비웠을 때 TextInput도 마찬가지로 비워집니다.)

onChangeText는 사용자가 내용을 수정할 때마다 호출되는 콜백 함수이며, 이 콜백 함수가 호출될 때는 현재 TextInput의 내용을 인자로 넣어서 호출됩니다.

이 코드를 모두 작성했다면 TextInput에 Hello World를 입력한 뒤 터미널 또는 개발자 도구의 Console에 다음과 같은 결과가 나타났는지 확인해보세요.

 LOG  H
 LOG  He
 LOG  Hel
 LOG  Hell
 LOG  Hello
 LOG  Hello 
 LOG  Hello W
 LOG  Hello Wo
 LOG  Hello Wor
 LOG  Hello Worl
 LOG Hello World

입력하는 텍스트가 text 상태 값에 잘 담기고 있습니다. 상태 값이 잘 출력되는 것을 확인했으면 console.log(text) 코드를 지우세요.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.