RN JS 연습 - 2

이번에는 전의 Todo 연습을 좀 더 발전 시켜서 하도록 하겠습니다.

일단 우리가 추가했던 Todo들의 완료, 삭제 버튼을 만들어 보도록 하겠습니다.

전에는 TodoItem은 1개의 string 이엿지만 이제는 complete라는 속성을 가지는 객체로 바꾸어야 합니다. 일단 addTodo을 이렇게 바꿉니다

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

처음에 complete 는 false이고 completeTodo함수를 통해서 complete 값을 바꿉니다.

이러한 함수를 만들면 되겠지요?

completeTodo(index) {
    let todos = this.state.todos
    todos[index].complete = !todos[index].complete
    this.setState({
      todos: todos,
    })
  }

여기서 index는 어떤 TodoItem인지를 가르쳐 줍니다. 즉 클릭된 아이템의 complete 값은 반대가 되겠지요. 그 후에 todos를 다시 저장.

삭제를 만들기 위해서는 적당히 deleteTodo 함수도 만듭시다

deleteTodo (index) {
    let todos = this.state.todos
    todos.splice(index, 1)
    this.setState({
      todos: todos,
    })
  }

이제 render를 어떻게 만들어야 할까요? TodoItem는 적당히 1개의 View에 들어가고 그 View는 Text(내용) complete버튼, delete버튼을 만듭니다. 이렇게 말이죠

<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 (
              <View key={index} style={{flexDirection: 'row'}}>
                <Text style={todoItem.complete ? {textDecorationLine: 'line-through'} : {textDecorationLine: 'none'}}>
                  {todoItem.context}
                </Text>
                <TouchableOpacity onPress={this.completeTodo.bind(this, index)}>
                  <Text>{todoItem.complete ? "---complete" : "---incomplete" }</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.deleteTodo.bind(this, index)}>
                  <Text>     delete </Text>
                </TouchableOpacity>
              </View>
            )
          })
        }
      </View>

일단 지금 complete의 값을 보아서 true이면 선이 그어지게, 아니면 일반적인 text로 보여줍니다. 그리고 각각의 complete, delete 버튼은 현재 어떤아이템이 눌러졋는지 알기위해서 index 값을 함수에 보내줍니다.

즉 전체적인 코드는

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

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 = {
      context: this.state.inputText,
      complete: false
    }
    let todos = this.state.todos
    todos.push(todoItem)
    this.setState({
      inputText: '',
      todos: todos,
    })
  }

  completeTodo(index) {
    let todos = this.state.todos
    todos[index].complete = !todos[index].complete
    this.setState({
      todos: todos,
    })
  }

  deleteTodo (index) {
    let todos = this.state.todos
    todos.splice(index, 1)
    this.setState({
      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 (
              <View key={index} style={{flexDirection: 'row'}}>
                <Text style={todoItem.complete ? {textDecorationLine: 'line-through'} : {textDecorationLine: 'none'}}>
                  {todoItem.context}
                </Text>
                <TouchableOpacity onPress={this.completeTodo.bind(this, index)}>
                  <Text>{todoItem.complete ? "---complete" : "---incomplete" }</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.deleteTodo.bind(this, index)}>
                  <Text>     delete </Text>
                </TouchableOpacity>
              </View>
            )
          })
        }
      </View>
    );
  }
}

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

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

이렇게 되겟지요.

아마 이해가 안되시는 부분이 있으시다면 다시 한번 코드를 읽어주세요.

다음편은 bind에 대해서 좀 더 알아보도록 하겠습니다.