리액트 네이티브(React Native)로 할 일 관리앱(To-Do App)을 만들기입니다. 이전 강좌에서 계속 이어지는 내용입니다.

• [React Native] TO-DO 앱 만들기 #1
• [React Native] TO-DO 앱 만들기 #2
• [React Native] TO-DO 앱 만들기 #3

이번 강좌에서는 할 일을 체크하는 기능과 삭제 기능을 구현합니다.

* * *

할 일을 체크(완료)하는 기능 구현하기

---

완료된 할 일에 대해서 ☑체크 아이콘을 표시하는 기능을 만들어 보자.

App.js 수정하기

할 일에 체크(완료)표시하는 checkTodo() 함수를 입력한다.

  checkTodo = (id) => {
    this.setState(prevState => {
      const [ todo ] = prevState.todos.filter(e => e.id === id);
      todo.completed = !todo.completed;
      return ({
        todos: [
            ...prevState.todos
        ]
      })
    });
  }

checkTodo() 함수는 todo.id를 인자값으로 입력받는다. 그리고 prevState.todos 배열에서 해당 id의 todo를 찾는다. 찾은 todo 데이터의completed 값을 변경한다.

그리고 구현된 checkTodo() 함수를 Body 컴포넌트에 넘겨준다. 아래 코드 화면에서 블럭으로 지정한 부분이다.

Body.js 수정하기

할일 목록에서 체크박스를 누르면 부모 컴포넌트(App 컴포넌트)에서 전달받은 checkTodo() 함수를 호출한다.

    render() {
        return (
            <View style={styles.container}>
                {
                    this.props.todos.map(data => (
                        <View style={styles.todo} key={data.id}>
                            <View style={styles.todoText}>
                                <TouchableOpacity style={styles.todoCheckbox} 
                                    onPressOut={() => this.props.checkTodo(data.id)}>

<TouchableOpacity>에서 onPressOut 이벤트 발생 시 this.props.checkTodo(data.id)를 호출한다.

아래 코드 화면에서 블럭으로 지정한 부분이다.

여기까지 구현된 앱의 동작화면은 아래와 같다.

체크박스를 선택하면 아이콘 모양이 바뀐다.

스타일(styles) 만들기

체크(완료)표시된 할 일을 다르게 표현하기 위해서 스타일을 구현한다. Body 컴포넌트의 styles에 todoCompleted 를 추가한다.

const styles = StyleSheet.create({

    // ... 생략 ...

    todoCompleted: {
        color: "#bbb",
        textDecorationLine: "line-through"
    }
});

할 일이 완료되면 스타일이 적용되도록 해보자.

<Text style={[data.completed ? styles.todoCompleted : null]}>{data.text}</Text>

data.completed 가 Ture 이면 todoCompleted 스타일이 적용된다.

아래 코드 화면에서 블럭으로 지정한 부분이다.

스타일이 적용된 앱의 화면은 아래와 같다.

* * *

할 일 삭제 기능 구현하기

---

그 다음은 할 일을 목록에서 삭제하는 기능을 만들어 보자.

App.js 수정하기

할 일을 삭제하는 removeTodo() 함수를 입력한다.

  removeTodo = (id) => {
    this.setState(prevState => {
      const index = prevState.todos.findIndex(e => e.id === id);
      prevState.todos.splice(index, 1);
      return ({
        todos: [
            ...prevState.todos
        ]
      })
    });
  }

id에 해당하는 할 일을 찾아서 삭제(splice)한다.

그리고 구현된 removeTodo() 함수를 Body 컴포넌트에 넘겨준다. 아래 코드 화면에서 블럭으로 지정한 부분이다.

Body.js 수정하기

할일 목록에서 삭제 아이콘를 누르면 부모 컴포넌트(App 컴포넌트)에서 전달받은 removeTodo() 함수를 호출한다.

<TouchableOpacity onPressOut={() => this.props.removeTodo(data.id)}>
  <MaterialCommunityIcons style={styles.todoDelBtn} size={30} name='delete-outline' />
</TouchableOpacity>

<TouchableOpacity>에서 onPressOut 이벤트 발생 시 this.props.removeTodo(data.id)를 호출한다.
아래 코드 화면에서 블럭으로 지정한 부분이다.

여기까지 구현된 앱의 동작화면은 아래와 같다.

삭제 아이콘을 누르면 할 일이 하나씩 목록에서 지워진다.

다음 강좌에서는 입력한 데이터(할일)를 로컬 스토리지에 저장하고 불러오는 기능을 포스팅할 예정입니다. 지금은 앱을 종료했다가 다시 실행하면 이전에 입력한 데이터가 사라집니다.ㅎㅎ

그리고 투두앱 소스는 모두 깃허브에 공개되어 있습니다.
https://github.com/anpigon/react-native-todo-app

* * *

이번에 간단한 앱을 구현하면서 리액트 네이티브의 한계점(단점?)과 이점을 어느 정도 알게 되었습니다. 리액트 네이티브는 To-do앱처럼 간단한 앱을 구현하기에는 정말 좋은 도구입니다. 만약 안드로이드(자바)로 개발했다면, UI컴포넌트를 개발하고 스타일을 구현하는데 시간이 많이 사용되었을 것입니다. 하지만, 안드로이드도 디자인 없이 구현한다면 금방 하겠지요.ㅋ

제가 리액트 네이티브를 추천한다면 이렇게 말하고 싶습니다.

• 안드로이드앱과 아이폰앱을 둘 다 개발하고 싶다면 리액트 네이티브를 사용하세요.
• 간단한 데모앱을 빠르게 만들고 싶다면 리액트 네이티브를 사용하세요.
• 자바스크립트를 좋아한다면 리액트 네이티브를 사용하세요.
• 안드로이드 스튜디오나 xcode를 설치하는 것(또는 개발환경 셋팅)이 귀찮다면 리액트 네이티브를 강력 추천합니다.

여기까지 읽어주셔서 감사합니다.

---

_{Sponsored ( Powered by dclick )}