[React-Native] 기능연습01(TextInput, Button, ScrollView)

 

TextInput , Button, Scrollview 등을 모두 이용하여,

텍스트를 입력하고 버튼을 누르면 앱 화면상에 있는 컨탠츠가 스크롤에 추가되는 내용 

 

1. "Add Text"버튼 만들기

App.js에 일단 alert를 띄우는 기능을 하는 버튼을 만듭니다.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {Button, View, StyleSheet, ScrollView} from 'react-native';

class App extends Component {
  onAddTextInput = () => {
    alert('I want to add a TextInput');
  };

  render() {
    return (
      <View style={styles.mainView}>
        <Button title="Add Text Input" onPress={this.onAddTextInput} /> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 50,
    alignItems: 'center',
    //justifyContent: 'center',
  },
  subView: {
    backgroundColor: 'yellow',
    marginBottom: 10,
  },
  anotherSubView: {
    flex: 2,
    backgroundColor: 'yellow',
    marginBottom: 10,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mainText: {
    fontSize: 20,
    fontWeight: 'normal',
    color: 'red',
    padding: 20,
  },
});

export default App;

 

 

2. Input Text 만들기 

InputText를 넣기 위해서는 따로 input.js를 생성해 주지 않고, App.js에 state와 textinput 태그를 이용하여 구현한다.

그 이유는 다음과 같다 

React Native의 data flow : 부모 → 자식 

즉, 데이터값을 자식이 부모에게 보내줄 수 없음 

그렇기 때문에 input.js를 따로 만들 경우, 해당 데이터를 부모인 App.js로 보내줄 수 없어 스크롤 뷰로 보여줄 수 없기 때문에 

App.js에 구현해주어야 한다. 

 

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {
  Button,
  View,
  Text,
  StyleSheet,
  ScrollView,
  TextInput,
} from 'react-native';
import Generator from './src/generator';
import NumList from './src/numlist';
import Input from './src/input';
import Header from './src/header';

class App extends Component {
  state = {
    myTextInput: ' ',
    alphabet: ['a', 'b', 'c', 'd'],
  };

  onAddTextInput = () => {
    alert('ADD TEXT INPUT');
  };

  onChangeInput = event => {
    this.setState({
      myTextInput: event,
    });
  };

  render() {
    return (
      <View style={styles.mainView}>
        <Button title={'Add Text Input'} onPress={this.onAddTextInput} />
        <TextInput
          value={this.state.myTextInput}
          style={styles.input}
          onChangeText={this.onChangeInput}
          mulitiline={true}
          maxLength={100}
          autoCapitalize={'none'}
          editable={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 50,
    alignItems: 'center',
    //justifyContent: 'center',
  },
  input: {
    width: '100%',
    backgroundColor: '#cecece',
    marginTop: 20,
    fontSize: 25,
    padding: 10,
  },
  subView: {
    backgroundColor: 'yellow',
    marginBottom: 10,
  },
  anotherSubView: {
    flex: 2,
    backgroundColor: 'yellow',
    marginBottom: 10,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mainText: {
    fontSize: 20,
    fontWeight: 'normal',
    color: 'red',
    padding: 20,
  },
});

export default App;

지난 Text Input단원에서 구현했던 것을 그대로 옮겨준다 (스타일까지 옮겨야함)

다음과 같은 화면이 완성된다. 

 

state를 2가지 추가했는데, myTextInput에는 텍스트입력을 받은 글을 저장하고, 

alphabet이라는 배열에는 그동안 입력한 텍스트들을 저장하는 용도로 사용한다.

 

3. 함수완성 

단순하게 alert창을 띄우던 함수를

이제 텍스트를 입력할 시 이를 배열에 추가하는 기능을 하도록 변경한다.

 

다음과 같던 함수를

  onAddTextInput = () => {
    alert('ADD TEXT INPUT');
  };

 

이전state값을 매개변수로 받아 다음과 같이 작성한다.

  onAddTextInput = () => {
    this.setState(prevState => {
      return {
        myTextInput: '', //새로운 값을 항상 받기 위해 빈칸으로 초기화
        alphabet: [...prevState.alphabet, prevState.myTextInput], //이전 state의 myTextInput를 alphabet배열에 추가
      };
    });
  };

 

4. 저장된 입력 보여주기(ScrollView)

버튼 아래에 스크롤 뷰를 추가해준다.

App.js

        <ScrollView style={{width: '100%'}}>
          {this.state.alphabet.map((item, idx) => (
            <Text style={styles.mainText} key={idx}>
              {item}
            </Text>
          ))}
        </ScrollView>

스타일도 추가해주며, 이를 한개씩 보여주기 위해서는 map함수를 사용해주어야 한다. (이전강의 참고)

오류를 내지 않기 위해서는 key값을 사용하지 않아도 넣어주어야 함을 잊지말자 

 

버튼 입력 이전	버튼 클릭 이후

 

 

전체코드)

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {
  Button,
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  TextInput,
} from 'react-native';
import Generator from './src/generator';
import NumList from './src/numlist';
import Input from './src/input';
import Header from './src/header';

class App extends Component {
  state = {
    myTextInput: ' ',
    alphabet: ['a', 'b', 'c', 'd'],
  };

  onAddTextInput = () => {
    this.setState(prevState => {
      return {
        myTextInput: '', //새로운 값을 항상 받기 위해 빈칸으로 초기화
        alphabet: [...prevState.alphabet, prevState.myTextInput], //이전 state의 myTextInput를 alphabet배열에 추가
      };
    });
  };

  onChangeInput = event => {
    this.setState({
      myTextInput: event,
    });
  };

  render() {
    return (
      <View style={styles.mainView}>
        <Button title={'Add Text Input'} onPress={this.onAddTextInput} />
        <TextInput
          value={this.state.myTextInput}
          style={styles.input}
          onChangeText={this.onChangeInput}
          mulitiline={true}
          maxLength={100}
          autoCapitalize={'none'}
          editable={true}
        />
        <ScrollView style={{width: '100%'}}>
          {this.state.alphabet.map((item, idx) => (
            <Text style={styles.mainText} key={idx}>
              {item}
            </Text>
          ))}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 50,
    alignItems: 'center',
    //justifyContent: 'center',
  },
  input: {
    width: '100%',
    backgroundColor: '#cecece',
    marginTop: 20,
    fontSize: 25,
    padding: 10,
  },
  subView: {
    backgroundColor: 'yellow',
    marginBottom: 10,
  },
  anotherSubView: {
    flex: 2,
    backgroundColor: 'yellow',
    marginBottom: 10,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mainText: {
    fontSize: 20,
    fontWeight: 'normal',
    color: 'red',
    padding: 20,
    margin: 20,
    backgroundColor: 'pink',
  },
});

export default App;