[React Native] 할 일 관리 애플리케이션(2)

Reference : 처음배우는 리액트 네이티브

 

 

기능 구현하기

 

추가, 삭제, 완료, 수정 기능을 구현해보자.

 

추가 기능

App.js

• 할일 항목은 내용, 완료 여부를 갖고 있어야하며 항목을 구분할 고유한 값(id)를 가져야한다.
• useState를 이용해 할 일 목록을 저장하고 관리할 task 변수를 초기값으로 임의의 내용을 입력한다.
• 최신항목이 가장 앞에 보이도록 tasks를 역순으로 렌더링되게 작성
• key 값을 지정해야 하므로, id를 key로 지정한다.
• _addTask 함수가 호출되면 tasks에 새로운 할 일 항목이 추가되도록 수정한다.
• id로는 추가되는 시간의 타임스탬프 사용, text는 Input 컴포넌트에 입력된 값을 지정
• 새로운 항목이므로 완료여부는 항상 false, newTask의 값을 빈 문자열로 지정해 Input 컴포넌트 초기화

 

삭제 기능

App.js

• 삭제버튼을 클릭했을 때 항목의 id를 이용해 tasks에서 항목을 삭제하는 함수를 작성한다.
• 생성된 항목 삭제 함수와 함께 항목 내용 전체를 전달해 자식 컴포넌트에서 id를 확인할 수 있도록 수정

 

Task.js

• PropTypes를 전달되는 props에 맞게 수정한다. (deleteTask 함수 를 전달 받음)
• 전달된 deleteTask 함수는 삭제 버튼으로 전달하고, 함수에서 필요한 항목의 id도 같이 전달한다.

IconButton.js

• props로 onPressOut이 전달되지 않았을 때도 문제가 생기지 않도록 defaultProps를 이용해 onPressOut의 기본값을 지정한다.
• props로 전달되는 값들의 type을 지정하고, 컴포넌트가 클릭되었을 때 전달된 함수가 호출되도록 한다.

 

 

완료 기능

완료상태로 만들어도 다시 미완료 상태로 돌아올 수 있도록 버튼을 만들자.

App.js

• 함수가 호출될때마다 완료 여부를 나타내는 completed값이 전환되는 함수 작성
• 작성된 함수는 Task 컴포넌트로 전달한다.

 

Tasks.js

• props로 전달된 toggleTask 함수를 완료 상태를 나타내는 버튼의 onPressOut으로 설정한다
• 항목 완료 여부에 따라 버튼 이미지가 다르게 나타나도록 수정
• 완료된 항목은 수정기능을 사용하지 않도록 수정 버튼이 나타나지 않도록 한다. + 디자인 수정
  • completed 값에 따라 수정버튼이 렌더링 되지 않도록 한다.
  • 완료 여부에 따라 취소선이 나타나고 글자 색이 변경되도록 스타일을 변경한다.
  • IconButton 컴포넌트에서 completed 값을 전달

 

IconButton.js

• 항목 완료 여부에 따라 아이콘 이미지의 색이 변경되도록 한다.

 

수정 기능

App.js

• 수정한 항목이 전달되면 해당 항목을 수정하는 _updateTask 함수를 작성한다.
• Task 컴포넌트에서 이 함수를 사용하도록 전달한다.

 

Tasks.js

• 수정 상태를 관리하기 위해 isEditing 변수를 생성하고 수정 버튼이 클릭되면 값이 변하도록한다.
• 수정된 값을 저장할 text 변수를 생성하고 Input 컴포넌트의 값으로 설정한다.
• 화면은 isEditing 값에 따라 Input 컴포넌트가 렌더링되도록 수정한다. 완료 버튼을 누르면 App 컴포넌트에서 전달된 updateTask 함수가 호출되도록 한다.

 

 

입력 취소하기

항목 추가 또는 수정 도중에 입력을 취소할 수 있도록 다른 곳을 클릭하면 내용이 사라지도록 하자.

Input.js

• Input 컴포넌트에 onBlur함수가 반드시 전달되도록 propTypes를 설정하고, 전달된 함수를 사용한다.
• 따라서 Input 컴포넌트를 이용하는 곳에서 onBlur 함수를 전달하도록 수정해야한다.

 

App.js

• App 컴포넌트에서 Input 컴포넌트가 포커스를 잃으면 추가중이던 값을 초기화하는 onBlur함수를 정의한다.

 

Task.js

• 동일하게 수정 상태일 때 Input 컴포넌트의 포커스를 잃으면 수정중인 내용을 초기화하고 수정상태를 종료하는 함수를 정의한다.

 

 

부가 기능

데이터 저장하기

AsyncStorage를 이용해 로컬에 데이터를 저장하고 불러오는 기능을 구현해보자.

AsyncStorage는 비동기로 동작하며 문자열로된 키-값 형태의 데이터를 기기에 저장하고 불러올 수 있는 기능을 제공한다.

expo install @react-native-async-storage/async-storage

 

App.js

• tasks라는 문자열을 키로하여 전달된 항목들을 문자열로 변환해서 저장하는 _saveTasks 함수를 작성한다.
• tasks의 값이 변경될 때마다 저장해야 하므로 setTasks 세터 함수를 이용하는 곳에서 _saveTasks 함수를 호출하도록 한다.

 

 

데이터 불러오기

Expo에서 제공하는 Apploading 컴포넌트를 이용하여 첫 화면이 나타나기 전에 함수가 완료되어 화면에 렌더링되도록 한다.

Apploading 컴포넌트는 특정 조건에서 로딩 화면이 유지되도록 하는 기능으로, 렌더링 하기 전에 처리해야하는 작업을 수행하는데 유용하게 사용된다.

expo SDK 40 부터는 Apploading 사용하기 위해 따로 설치를 해야한다.

expo install expo-app-loading

 

App.js

• 항목을 저장할 때 사용했던 키와 동일한 키로 데이터를 불러오고 객체로 변환하여 tasks에 입력하는 _loadTasks 함수를 작성한다.
• Apploading 컴포넌트를 사용해 첫 화면이 렌더링되기 전에 _loadTask 함수가 호출되도록 한다.

 

Apploading 컴포넌트

• startAsync : AppLoading 컴포넌트가 동작하는 동안 실행될 함수
• onFinish : startAsync가 완료되면 실행할 함수
• onError : startAsync에서 오류가 발생하면 실행할 함수

 

 

로딩화면과 아이콘

프로젝트 생성과 함께 assets 폴더에 생성되는 splash.png, icon.png 파일은 로딩화면과 애플리케이션 아이콘으로 사용되는 이미지이다.

프로젝트에서 아이콘과 로딩 화면으로 사용되는 이미지는 app.json 파일에서 확인할 수 있다.

 

원하는 로딩이미지를 지정하고, 기기의 크기에 따라 공백을 제거하도록 해보자.

• resizeMode의 값을 cover로 변경하면 로딩화면으로 사용하는 이미지가 화면 전체를 덮을 수 있도록 렌더링
• backgroundColor 의 값을 변경하면 흰색으로 나타나는 공백 부분이 지정한 색으로 렌더링된다.

 

아이콘의 경우 1024 * 1024 크기 (아이폰) 의 이미지를 사용하여 icon.png 파일을 변경한다.

 

 

 

iOS와 안드로이드에서 각각 적용되는 속성이 다르거나 기기의 크기에 따라 의도한 모습과 다르게 보이는 경우가 있다.

따라서 한가지 플랫폼을 기준으로 개발하더라도 중간중간 다른 플랫폼의 결과물을 확인하는 것이 중요하다.

 

 

 

코드는 너무 길어서 깃헙에 업로드