[ReactNative] 입력 칸 만들기 - TextInput

MyInput 컴포넌트 만들기

리액트 네이티브에서는 TextInput 컴포넌트를 사용하여 사용자가 입력한 텍스트를 전달받을 수 있습니다. 

다음은 TextInput 컴포넌트를 사용하는 방법의 예입니다.

import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';

const MyInput = () => {
  const [text, setText] = useState('');

  const onChangeText = (inputText) => {
    setText(inputText);
  };

  return (
    <View style={styles.container}>
      <TextInput
        onChangeText={onChangeText}
        value={text}
        placeholder="아무거나 입력하세요..."
        style={styles.input}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    paddingTop: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 8,
  },
});

export default MyInput;

TextInput 컴포넌트는 입력 칸을 렌더링하는 데 사용됩니다.

• onChangeText prop은 사용자가 입력한 텍스트가 변경됬을 때 onChangeText함수를 실행시킵니다.
• onChangeText함수에서는 useState hook를 사용하여 사용자가 입력한 텍스트의 상태를 관리합니다. 
• value prop은 사용자가 입력한 텍스트의 값을 설정하는 데 사용합니다.
• placeholder prop은 입력 칸이 비어 있을 때 보여줄 텍스트를 설정하는 데 사용합니다.
• style prop은 높이, 테두리 색상 및 padding과 같은 스타일을 입력 칸에 적용하는 데 사용합니다.

 

MyInput 컴포넌트 사용하기

이제 부모 컴포넌트인 App.js에서 MyInput 컴포넌트를 가져와 사용해보겠습니다.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MyInput from './MyInput';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>My Input Example</Text>
      <MyInput />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});

export default App;