React Native - To do app, 그리고 유투브 인강

React Native 유투브 강좌 괜찮은 것을 찾아서

요즘 출퇴근 길에 열심히 보고 있습니다.

 

'The Net Ninja' 라는 영국 유투버로

본업이 강사 인 지 강의 도중에 버벅거리지도 않고

코딩 실수로 debugging 하는 시간도 거의 없어

쓸데없이 시간 보내는 구간이 없다는게 장점입니다.

미리 리허설을 하는 것으로 보임.

 

유일한 단점은, 자막없는 영어 라는거 ..

여기서 React Natiive Tutoral for Beginners 를 열강하고 있습니다.

The Net Ninja Contents

 

 

강좌 통해 실습한대로 'To do List' 를 만들어보겠습니다.

coding 주요 목적은 state 와 props 활용 및 익숙해지기

가장 기본적인 Simple To Do List App 이며 

기능 및 Component 를 추가 확장해서 완성도를 높여가야 할 것 같습니다.

 

$ expo init ToDoList

$ cd ToDoList

$ expo start

 

Layout은 Header 와 Main 으로 구성되어있고

Main FlatList Component 로 관리하면서 TodoItem 을 삭제 , AddTodo 에서 추가.

 

[App.js] Main UI 는 아래와 같이 구성.

- todos를 state로 관리하면서 추가 삭제

- pressHandler key와 매칭된 item click 시 filter callback 함수를 통해 remove

- submitHandler 통해 인자로 넘어온 text 를 to do list 에 추가

- AddTodo 함수에 submitHandler 를 props 로 전달 및 callback 받아 setTodos 로 todos List 에 add.

import React, {useState} from 'react';
import { StyleSheet, View, FlatList } from 'react-native';
import Header from './Header';
import TodoItem from './TodoItem';
import AddTodo from './AddTodo';

export default function App() {
  const [todos, setTodos] = useState([
    {text:'buy coffee', key:'1'},
    {text:'create an app', key:'2'},
    {text:'play on the switch', key:'3'},
  ]);

  const pressHandler = (key) => {
    setTodos((prevTodos) => {
      return prevTodos.filter(todo => todo.key != key);
    });
  }

  const submitHandler = (text) => {
    setTodos((prevTodos) => {
      return [
        {text:text, key:Math.random().toString()},
        ...prevTodos
      ]
    });
  }

  return (
    <View style={styles.container}>
      <Header/>
      <View style={styles.content}>
        <AddTodo submitHandler={submitHandler} />
        <View style={styles.list}>
            <FlatList
              data={todos}
              renderItem={({item})=> (
                <TodoItem item={item} pressHandler={pressHandler}/>
              )}
            />
        </View>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding:40,
    backgroundColor:'#ffd',
  },
  content: {
    padding:20,
  },
  list: {
    marginTop: 20,
  }
});

 

[Header.js]

- Title Layout 별도 분리

- 현재 코드로만 보면 굳이 file split 할 분량은 아니지만, 확장성을 고려해 분리 진행.

- View Component 안에 <Header /> 통해 호출.

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

export default function Header() {
    return (
        <View>
            <Text style={styles.title}>My todos</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    title: {
        textAlign:'center',
        color:'#3ff',
        fontSize:20,
        fontWeight:'bold',
        backgroundColor:'coral',
    }
});

[TodoItem.js]

- FlatList Component 로 구성된 List

- TouchableOpacity component 로 click event 를 받아 pressHandler() 에 props로 item, pressHandler 같이 전달

- App.js 에서 remove

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';

export default function TodoTItem({item, pressHandler}) {
    return(
        <TouchableOpacity onPress={() => pressHandler(item.key)}>
             <Text style={styles.item}>{item.text}</Text>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    item: {
        padding:16,
        marginTop:16,
        borderColor:'#bbb',
        borderWidth:1,
        borderStyle:'dashed',
        borderRadius:10,
    },
})

 

[AddTodo.js]

- UI 는 Editor 와 Button 2개 Component 를 Vertical Style 로 구성

- <TextInput> Component 에 입력한 string 을 button click 시 submitHandler() 에 text 와 함께 전달.

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

export default function AddTodo({submitHandler}) {
    const [text, setText] = useState('');
    const changeHandler = (val) => {
        setText(val);
    }
 
    return (
        <View>
            <TextInput
                style={styles.input}
                placeholder='new todo..'
                onChangeText={changeHandler}
                value={text}
            />
            <Button
                onPress={() => submitHandler(text)}
                title='add todo'
                color='coral'
            />
        </View>
    )
}

const styles = StyleSheet.create({
    input: {
        marginBottom: 10,
        paddingHorizontal: 8,
        paddingVertical: 6,
        borderBottomWidth : 1,
        borderBottomColor: '#ddd',
    },
});

 

최종 OutPut

Output