RN JS 연습 - 1

이번에는 간단한 Todo List을 만들어 봅시다. 가장 유명한 예제죠.

일단 간단하게, UI을 만들어 봅시다.

<View style={styles.container}>
        <TextInput
          style={{height: 40,borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => {
            this.setState({inputText: text})
          }}
          value={this.state.inputText}
          />
        <TouchableOpacity>
          <Text>
            add Todo
          </Text>
        </TouchableOpacity>

</View>

이렇게 만듭시다. TouchableOpacity 을 당연히 react-native에서 import 해야 겠죠?

import { .... , TouchableOpacity} from 'react-native'

추가해주세요.

일단 실행을 하면 적당히 화면이 있습니다. 이제 저 add Todo 클릭하면 우리가 입력한 text가 저장이 되도록 만들게 싶습니다.

그렇다면 어떻게 해야 될까요?

<TouchableOpacity onPress={this.addTodo.bind(this)}>
          <Text>
            add Todo
          </Text>
</TouchableOpacity>

이렇게 onPress 속성을 통해서 우리가 어떤 함수를 실행할지 정할수 있습니다. 저는 이 클래스안에 있는 addTodo을 실행시키도록 만들었습니다. 그다음에 있는 bind(this)는 누가 이 함수를 불렀는지를 알수 있게 하기 위해 있습니다. (정확한 설명은 bind(this)을 검색해주세요)

그러면 addTodo는 어떻게 할까요?

  addTodo() {
    let todoItem = this.state.inputText
    let todos = this.state.todos
    todos.push(todoItem)
    this.setState({
      inputText: '',
      todos: todos,
    })
  }

이렇게 만들어 주시면 됩니다. 계속 todoItem이 todos에 추가가 되겠지요.

todos라는 state을 사용했으니 이걸 초기화 시켜주어야 겠지요?

componentWillMount() {
    this.setState({
      inputText: '',
      todos: [],
    })
  }

추가 합니다.

우리가 저장한 todos을 이제 보여줄 차례입니다.

{
          this.state.todos.map((todoItem, index)=> {
            return (
              <Text key={index}>
                {todoItem}
              </Text>
            )
          })
        }

을 touchopacity 뒤에 추가를 해줍시다.

괄호 안에 있기 때문에 이건 js코드를 실행 하게 됩니다. 우리는 todos를 map을 통해 <Text>들을 return 시키도록 만듭니다.

<Text>{todos[0]}</Text>
<Text>{todos[1]}</Text>
<Text>{todos[2]}</Text>

저 윗코드가 이런식으로 바뀌게 될 것니다.

실제로 확인을 해볼까요?

아마 잘 작동이 될것니다.

전체적인 코드는

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity
} from 'react-native';

console.log('check')


class gitbookTest2 extends Component {
  componentWillMount() {
    this.setState({
      inputText: '',
      todos: [],
    })
  }

  addTodo() {
    let todoItem = this.state.inputText
    let todos = this.state.todos
    todos.push(todoItem)
    this.setState({
      inputText: '',
      todos: todos,
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={{height: 40,borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => {
            this.setState({inputText: text})
          }}
          value={this.state.inputText}
          />
        <TouchableOpacity onPress={this.addTodo.bind(this)}>
          <Text>
            add Todo
          </Text>
        </TouchableOpacity>
        {
          this.state.todos.map((todoItem, index)=> {
            return (
              <Text key={index}>
                {todoItem}
              </Text>
            )
          })
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('gitbookTest2', () => gitbookTest2);

이렇게 됩니다.

이해가 안되시는 부분이 있다면 그 이해가 안되는 부분을 검색하시거나, 댓글을 달아주세요.

그리고 다시 한번 읽어주시길 바랍니다.