아무래도 문서만 들여다보고 무언가를 익힌다는건 내 적성에 맞지 않았다.
물론 이론은 어느정도 필요하긴 했지만 역시 직접 만져보며 배우는게 최고..!
오늘은 React Native를 이용해 To Do List App을 만들어봤다!
참고 자료
React Native 공식 문서: https://reactnative.dev/docs/getting-started
React Native UI 참고: https://wit.nts-corp.com/2020/03/23/6014
TypeScript를 이용한 To Do List 만들기: https://medium.com/@amanshharma/react-native-todo-app-using-typescript-and-hooks-bacc5db05100
1. 디자인 구상
사실 평소 To do List를 많이 활용하지 않아 머릿속에 떠오르는 대로 구상했다.
큰 제목과 입력할 수 있는 인풋창과 버튼 그리고 스크롤을 할 수 있는 체크박스가 있는 목록정도?
나름 배치한다고 했는데도 결과물은 조잡한 느낌을 벗을 수가 없었다...
2. 레이아웃 제작
초반엔 이것 저것 직접 사용해보고 적응하는데 시간을 많이 보냈다.
그래도 사용하던 태그들만 조금씩 달라졌을 뿐 원리는 그대로인 것들이 많아 적응하는데 오래 걸리지는 않았다.
다만 기존 React에 있다가 사라진 것, 기존엔 없었지만 React Native에서 새로 생긴 것 등은 사실 아직도 잘 적응이 안되긴 했다.
3. 기능 구현
기능 구현도 마찬가지였다.
함수형 컴포넌트의 useState를 이용해 이번 App은 만들었는데 다른 기능들도 기존 React에서 큰 변화는 없었다.
다만 가장 불현했던 점은 콘솔을 찍어보는 게 불편했다는 점..!
나중에 Pratt에게 다양한 방법을 듣기는 했지만 기능을 구현하면서 가장 난감했던 부분이었다!
4. 전체 코드
누군가에게는 도움이 되기를 바라며..!
import React, { useState } from 'react';
import {KeyboardAvoidingView, SafeAreaView, StyleSheet, Text, TextInput, TouchableHighlight, View, ScrollView, Button} from 'react-native';
const App = () => {
interface IToDo {
text: string;
}
const [toDo, setToDo] = useState<string>('');
const [list, setList] = useState<IToDo[]>([]);
const addList = () => {
if(toDo){
const newValue = [...list, {text: toDo}];
setList(newValue);
setToDo('');
}
};
const removeItem = (index: number): void => {
const newToDoList = [...list];
newToDoList.splice(index, 1);
setList(newToDoList);
};
return (
<SafeAreaView style={styles.container}>
<Text style={styles.appTitle}> To Do List</Text>
<View style={styles.listContainer}>
<KeyboardAvoidingView style={styles.addList}>
<TextInput style={styles.addInput} placeholder="할 일을 적어주세요." value={toDo} onChangeText={(e)=>{setToDo(e)}} />
<TouchableHighlight
style={styles.addBtn}
onPress={addList}
underlayColor="red">
<>
<Text>ADD</Text>
</>
</TouchableHighlight>
</KeyboardAvoidingView>
<ScrollView style={styles.toDoContent}>
{list.map((toDo: IToDo, index:number)=>(
<View style={styles.listItem} key={index}>
<Text style={styles.listItemText}>{toDo.text}</Text>
<Button
title="X"
onPress={() => {
removeItem(index);
}}
color="crimson"
/>
</View>
))}
</ScrollView>
</View>
</SafeAreaView>
);
};코드 설명!
1. 전반적인 레이아웃
React Native에서는 div의 역할을 하는 것이 바로 View 였다.
하지만 View에도 휴대폰의 노치 부분이나 홈바부분에 걸리지 않게 도와주는 SafeAreaView라던가 인풋창에 글자를 입력할 때 키패드에 인풋창이 가리는 걸 방지해주는 KeyboardAvoidingView, 컨텐츠의 크기가 커지거나 길이가 길어지면 화면이 저절로 스크롤 되게 도와주는 Scroll View 등 기능적인 부분을 하는 View태그를 써봤다.
Button 태그도 React Native에선 스타일을 주는데 한계가 있다고 해 TouchableHighLight 이라는 태그를 써봤다. 클릭 시 색이 변하는 버튼인데 여기선 굳이 쓸 필요가 있었나 싶기도 한 코드이다..
2. 버튼 클릭 시 텍스트 추가
이건 웹사이트 댓글 추가 기능처럼 구현했다.
인풋에서 입력한 value를 받아 state에 저장하고 그 state를 이용해 빈 배열에 map으로 추가하는 방식으로 구현하는 방식이다.
입력 후 인풋창에 있던 텍스트는 없어져야 하기 때문에 입력한 값이 들어가는 state를 공백으로 바꿔주는 것도 잊지 말아야한다!
3. 텍스트 삭제
splice 함수를 이용해 List state에서 지워줬다.
state의 불변성을 지켜주기 위해 얕은 복사를 이용해 함수를 만들었다.
내 첫 App을 만들어봤다..!
처음 개발 공부를 시작하고 아직 뭐가 쉬운지 어려운지도 몰랐던 몇 개월 전이 떠오르면서 너무 재미있었다.
레이아웃이던 기능이던 원하는대로 구현이 되지 않아도 그저 새로운 걸 배운다는 설렘에 더 그랬던 것 같다.
아직 TypeScript를 제대로 적용해보지 못하기도 했고 디자인적으로나 기능적으로나 부족한게 많은 앱이지만 더 발전할 가능성이 많다는 긍정적인 마인드로 기분 좋게 잠에 들 수 있을 것 같다.
아주 작고 소중한 내 첫 App..!
앞으로도 화이팅!
