흑흑 강의영상 4강이 없어서!! 5강으로 건너뛰었다... 바뀌어있는 부분을 추리해서 공부를 해보겠다 ...!
https://www.youtube.com/watch?v=3oha309vG1M&t=3s
추가된 부분은 다음과 같다.
const [BorderBottomColor, setBorderBottomColor] = useState('lightgray');
const [Name, setName] = useState('');
const MiddleView = () => (
<View
style={{
width: '100%',
height: '20%',
//backgroundColor: 'red',
marginTop: '5%',
display: 'flex',
justifyContent: 'center'
}}>
<Text
style={{
color: 'lightgray'
}}>휴대폰 번호</Text>
<TextInput
style={{
width: '80%',
height: '50%',
backgroundColor: 'white',
}}
placeholder="휴대폰 번호"
// value="Hello"
value={Name}
onChangeText={() => {
}}
onFocus={() => {
setBorderBottomColor('#0064FF');
}}
onEndEditing={() => {
setBorderBottomColor('lightgray');
}}>
</TextInput>맨 위에 useState부분이랑 TextInput안에 value, onFocus, onChangeText, onEndEditing 부분이 추가된 것 같아보인다. 다른 코드는 안보여서 이게 끝인거같다 ... 여기에 대해서 알아보자!
useState
useState는 React Hooks의 한 종류이다.
Hooks란 기존의 함수형 컴포넌트에서도 상태 관리나 주기 관리를 할 수 있도록 다양한 기능을 제공하는 것이다.
컴포넌트에서 동적인 값을 상태(state)라고 부른다. useState는 함수형 컴포넌트에서 가변적인 상태를 관리할 수 있게 해준다. 하나의 변수처럼 사용을 할 수 있다는 것이다. 기본형은 다음과 같다.
const [value, setValue] = useState(초기값);useState를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출한다.useState(초기값) 함수를 호출하면 배열이 반환되는데, 여기서 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸는 함수이다.
강의에서는 useState가 회원정보를 받아오는 데에 쓰일 것 같다!
TextInput
https://reactnative.dev/docs/textinput
WOW 여기에 사용법이 다 나와있다. TextInput에 적용할 수 있는 속성이 정~~말 많다! 그 중에 지금 쓰인 두 가지 속성에 대해서 알아보자.
onChangeText
onChangeText는 TextInput에 글자를 입력할 때마다 무언가를 하고 싶을 때 사용한다.
(perplexity의 설명을 참고하여...)
여러분이 앱에서 메모를 쓰고 있다고 상상해 보세요.
글자를 입력할 때마다, 앱이 그 글자를 기억하고 화면에 보여주길 원하죠.
이때onChangeText를 사용합니다.
onChangeText는 여러분이 입력한 글자를 바로 알려줍니다.
그래서 앱은 새로 입력된 글자를 바로 기억하고 화면에 보여줄 수 있어요.
간단한 코드로 보면 이렇습니다:const [메모, 메모저장] = useState(''); <TextInput onChangeText={새글자 => 메모저장(새글자)} value={메모} />이 코드는 "새 글자가 입력될 때마다, 그 글자를 메모에 저장해줘"라고 앱에게 말하는 거예요.
onChangeText는 마치 여러분이 쓰는 글자를 실시간으로 읽어주는 비서 같은 거랍니다!
이해하기 쉽게 말해달랬더니 진짜 이해하기 너무 쉽게 말해줌 ㄷㄷ;; 맞춤형!!
그리고 저기에서 value가 정확히 뭘 하는지 이해가 안가서 찾아봤다.
TextInput의value속성은 화면에 실제로 보이는 입력 필드의 텍스트 값이다.
이제 잘 알게 되었다!!! 그리고 매개변수 부분에 뭐가 들어가야하는지 궁금해서 물어봤더니, 저 부분에는 문자열 형식의 변수가 들어간다고 한다.
onFocus
onFocus는 사용자가 입력 필드에 포커스를 맞출 때 호출되는 콜백 함수이다. 사용자가 TextInput을 탭하거나 키보드로 선택할 때 트리거된다.
강의에서는 매개변수 부분에 아무것도 넣지 않았는데, 이 경우에는 단순히 포커스 이벤트가 발생했다는 사실만 감지하고 반응하게 된다.
만약 매개변수 부분에 이벤트 객체를 넣게 된다면! 다음과 같이 사용할 수 있다.
(perplexity의 설명을 빌려...)
<TextInput onFocus={(event) => { console.log('포커스 받은 입력 필드의 ID:', event.nativeEvent.target); console.log('포커스 받은 시간:', new Date(event.timeStamp)); }} placeholder="여기에 입력하세요" />이 예시에서:
event.nativeEvent.target: 포커스를 받은TextInput의 고유 ID를 알려줍니다. 예를 들어 '1234'와 같은 값이 출력될 수 있습니다.event.timeStamp: 포커스 이벤트가 발생한 시간을 밀리초 단위로 알려줍니다. 이를 통해 정확히 언제 사용자가 입력 필드를 선택했는지 알 수 있습니다.- 이러한 정보는 다음과 같은 상황에서 유용할 수 있습니다:
- 여러 개의 입력 필드가 있을 때, 어떤 필드가 포커스를 받았는지 구분할 수 있습니다.
- 사용자의 입력 패턴을 분석할 때, 각 필드에 포커스를 준 시간을 기록할 수 있습니다.
- 이벤트 객체를 통해 이러한 세부 정보에 접근함으로써, 사용자의 상호작용을 더 정확하게 추적하고 반응할 수 있습니다.
여기서 도대체 event 부분에는 뭘 넣는건지 궁금해서 물어봤다!
event부분에는 우리가 직접 값을 넣는 것이 아니라, event 객체는 포커스 이벤트가 발생했을 때의 정보를 담고 있는 것이다. 라고 했다! 이해가 쏙쏙~
이 강의영상에서는 onFocus가 키보드에 포커싱했을 때, TextInput의 bottom border 색상을 바꾸기 위해 사용하였다.
onEndEditing
onEndEditing은 텍스트 입력이 완료되었을 때 호출되는 콜백 함수이다. 사용자가 텍스트 입력을 마치고 입력 필드에서 포커스가 벗어날 때 실행된다.
입력된 텍스트의 최종 값을 확인하거나 처리할 때 유용하다. 입력 완료 후 추가 작업을 수행하고자 할 때 사용한다. 이 함수 또한 이벤트 객체를 매개변수로 받을 수 있다.
그런데 onEndEditing은 안드로이드에서 동작하지 않을 수 있다고 한다... 크로스 플랫폼 개발을 위해서는 onSubmitEditing을 사용하는 것이 가장 안정적인 선택일 수 있다는데...
나는 그냥 onChangeText를 사용하면 될 것 같다! 가장 간단하고 쉬운 방법이라고 생각한다..!!
정리
textinput의 변경되는 값을 받아오고 싶다면 useState로 변수를 만들고, onChangeText로 변경되는 문자열을 받아오는 게 가장 편하고 좋다!
그리고 함수들의 매개변수에는 이름만 잘 지어서 넣어주면 된다!
