HybridApp-React Native 2세대 (Todo List앱)

<최종화면> 할일 목록을 누르면 해당 항목은 지워지고, Done화면에 생긴다.

라이브러리는 stackNavigator를 사용하였다.

---

작업하기 전에 AVD를 실행시켜 놓자.

cmd창에서 작업할 경로까지 접근하여 init하자.

React Navigation을 사용하기 위해 5가지를 추가하자.

명령어:npm install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

 

추가로 StackNavigator를 사용하기 위해 아래 사진과 같이 설치하자.

명령어:npm install react-navigation-stack @react-native-community/masked-view

라이브러리가 추가 잘되었다면 우선 한번 run을 하자.

package.json파일을 확인하면 추가된 항목을 확인할 수 있다.

우선 기본 구조는 아래와 같다. Screen 폴더를 만들고, Screen폴더 안에 TodoScreen, DoneScreen파일을 만들자.

 RN13NavigationTodoApp폴더 안에 screens 폴더를 만들자.

screens폴더 안에 TodoScreen.js, DoneScreen.js 파일을 만들자.

우선 각 화면에 Text를 보여주자.

Main.js 파일을 만들자.

Main.js에서는 StackNavigator 객체를 생성하여 두 스크린을 연결하자.

페이지를 이동하게 <View>를 <TouchableOpacity>로 변경하자.

그리고 눌렀을때 화면을 전환하자.

컴포넌트 간에 데이터를 전달할 방법은 없다.

그래서 Main.js에서 데이터를 관리하고 각각의 컴포넌트에게 전달하자.

생성자에 데이터를 보관하고, Appcontainer에 두 스크린이 있으므로,

데이터를 사용할 수 있게 <Appcontainer>에 임의로 screenProps객체를 두자. 

Main.js에 있는 데이터를 TodoScreen.js에서 확인해보자.

map()메소드를 이용하여 데이터를 보여주자.

참고 사항 - map()의 파라미터는 총 3가지가 있다. ( element, index, arr )

그러나 화면 아래에 경고창이 뜰 것이다. key 값을 주자.

화면에 보여준 데이터를 클릭할 수 있도록 <TouchableOpacity>태그를 이용하자.

너무 글자들이 붙어 있다. 약간의 스타일을 주자.

완료한 데이터를 저장할 빈 배열(done)을 만들자. 

DoneScreen.js에서 데이터가 잘 전달되는지 길이를 출력해보자.

빈 배열이므로 아직 길이가 0일 것이다.

배열 요소를 출력하도록 하자. 

done 배열은 비어 있어서 길이도.. 요소도 없을 것이다.

이제 Todo화면에서 해당 리스트를 누르면 호출되는 메소드(addDone)를 만들자.

해당 메소드를 Main.js에 만드는 이유는 데이터가 Main에 있기 때문이다.

index는 해당 리스트를 클릭하는 TodoScreen.js에서 넘겨줄 것이다.

<실행화면> - TodoList에서 해당 리스트를 누르면, 리스트가 없어진다.

이제 클릭한 리스트가 Done에 추가되도록 하자.

<실행화면> - TodoList에서 클릭한 목록은 지워지고, 그 목록이 Done 화면에 나온다.

//별외 코드 줄이기 (참고사항)

---

<복붙용 코드>

Main.js

import React, {Component} from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import TodoScreen from './screeens/TodoScreen';
import DoneScreen from './screeens/DoneScreen';
import { createAppContainer } from 'react-navigation';
 
//StackNavigator객체 생성
const stackNav= createStackNavigator(
    {
        Todo: {screen:TodoScreen},
        Done: {screen:DoneScreen},
    }
);
 
//Appcontainer
const Appcontainer= createAppContainer(stackNav);
 
export default class Main extends Component{
 
    // 스크린(컴포넌트)간에는 데이터를 전달할 수 없어서
    // 스크린들을 Navigator로 가지고 있는 이 Main.js에서 데이터를 만들고
    // 이를 스크린들에 전달하여 사용하도록 해야함.
    constructor(){
        super();
        this.state={
            todo: ['study Android','study ReactNative','travel','health'],
            done: [],
        }
    }
 
    render(){
        return <Appcontainer 
                    screenProps={
                         {
                         todo: this.state.todo,
                         done: this.state.done,
                         //배열을 변경하는 addDone메소드도 전달
                         addDone: this.addDone,
                         } 
                    }>
 
                </Appcontainer>
    }//render method
 
    //TodoScreen에서 항목을 클릭했을 때 todo배열요소를 done배열로 옮기는 기능
    addDone=(index)=>{
        //전달받은 index번호의 항목을 todo배열에서 제거
        //splice(제거할 index번호, 제거할 요소개수)메소드 
        let element=this.state.todo.splice(index,1); //todo 배열에서 제거한 index번호 1개 요소를 리턴함
 
        // 빼내온 요소 element를 done배열에 추가
        this.state.done.push(element);
        
        // 제거된 배열로 state.todo배열을 변경 : 화면 갱신
        this.setState({
            todo:this.state.todo,
            done:this.state.done,
        });
 
        // 별도 추가.. 위의 코드를 조금 다르게 간결하게..
        // const {todo, done}=this.state;
        // let item=todo.splice(index,1);
        // done.push(item);
        // this.setState({ todo, done,
        //     // 만약 프로퍼티명과 값을 가지고 있는 변수명이 같다면 변수명만 쓰면됨 예) todo:todo -> todo
        //     // todo:todo,
        //     // done:done,
        // });
           
      
    }
 
}//Main class

TodoScreen.js

import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
 
export default class TodoScreen extends Component{
    render(){
        return(
            <View style={style.root}>
                <Text style={style.title}>TODO LIST</Text>
 
                {/* 받은 todo배열을 화면에 리스트로 보여주기 */}
                {
                    this. props.screenProps.todo.map((item,index)=>{
                        return (
                            //클릭했을 때 todo배열 개수 변경
                            <TouchableOpacity key={index} style={{margin:8}} onPress={()=>{this.props.screenProps.addDone(index);}}>
                                <Text style={{color:'indigo'}}>{item}</Text>
                            </TouchableOpacity>
                        );
                    })
                }
 
 
                {/* 페이지 이동 버튼 : 글씨로.. */}
                <TouchableOpacity style={{marginTop:24}} onPress={()=>{this.props.navigation.navigate('Done')}}>
                    <Text style={{color:'blue'}}>Go to Done List</Text>
 
                    {/* 우선 Main.js의 todo데이터를 받았는지 확인 */}
                    <Text>Todo list number : {this.props.screenProps.todo.length}</Text>
 
                </TouchableOpacity>
            </View>
        );
    }
}
 
const style= StyleSheet.create({
    root:{flex:1, justifyContent:'center', alignItems:'center'},
    title:{fontWeight:'bold', margin:16,}
});

DoneScreen.js

import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
 
export default class DoneScreen extends Component{
    render(){
        return(
            <View style={style.root}>
                <Text style={style.title}>DONE LIST</Text>
 
                {/* Main.js로 부터 받은 done 배열 출력 */}
                <Text>Done list number : {this.props.screenProps.done.length}</Text>
 
                {/* done배열 출력 */}
                {
                    this.props.screenProps.done.map((item,index)=> 
                                                        <TouchableOpacity key={index} style={{margin:8}}>
                                                            <Text style={{color:'green'}}>{item}</Text>
                                                        </TouchableOpacity>
                                                    ) //함수 내용이 한줄이라서 중괄호{}, return  생략
                }
            </View>
        );
    }
}
 
const style= StyleSheet.create({
    root:{flex:1, justifyContent:'center', alignItems:'center'},
    title:{fontWeight:'bold', margin:16,}
});