[React Native] TextInput 사용해서 정보 입력받기(useState)

위와 같이 게시글 제목과 내용을 입력받아 볼 것이다

const [title, setTitle] = useState('');
const [content, setContent] = useState('');

우선 useState를 사용하여 변수를 선언해 준다

배열에서 첫번째 오는 건 변수명, 두번째 오는 것은 해당 변수의 값을 변경할 함수명이다

useState()에 인자로 기본값을 넘겨줄 수 있다

 

<TextInput
    value={title}
    onChangeText={(text) => { setTitle(text) }}
    style={style.TitleText }
    placeholder='게시글 제목을 입력해 주세요.' />
<View style={ style.HorizontalLine} />
<TextInput
    value={content}
    onChangeText={(text) => { setContent(text) }}
    style={ style.ContentText }
    multiline={true}
    placeholder='스터디 내용을 입력해 주세요.' />

value에 위에서 설정한 변수명을 넣어 주고, onChangeText(TextInput 값이 바뀔 때마다 호출되는 함수)를 이용해 변수의 값을 변경해 주면 된다

* TextInput을 여러 줄 작성할 수 있게 하고 싶다면 multiline을 true로 설정해 주면 된다