Today I Learned
- React Native로 CRUD 구현하기
if문으로 tap 버튼 구현하기
{todos.map((todo) => {
// 카테고리가 같은 때만 return해라
if (category === todo.category) {
return ( )
}
};사망토론 팀프로젝트 때 최신순, 좋아요순 정렬을 구현하고 싶었는데 좋아요순 정렬을 구현하는 데까지만 성공하고 이걸 탭을 눌렀을 때 어떻게 처리해야 할지 몰라서 중간에 포기했었다. 근데 오늘 튜터님의 강의를 들으면서 state를 하나 만들어서 그 값에 따라 if문으로 처리할 수 있다는 것도 알게 됐다.
삭제 시 alert 띄우기
const deleteTodo = (id) => {
Alert.alert("삭제", "정말 삭제하시겠습니다?", [
{text: "취소",
style: "caneel"},
{text: "삭제",
style: "destructive",
onPress: () => {
const copy = [...todos];
const newTodos = copy.filter((todo) => todo.id !== id);
setTodos(newTodos)
}}
])
};react에서는 그냥 window.confirm으로 간단하게 확인창을 띄울 수 있었는데 react-native는 형식이 조금 복잡하다. "삭제" 버튼을 클릭했을 때 onPress로 state를 변경해주는 방법이다.
삼항연산자로 텍스트와 인풋 토글하기
{ todo.isEdit
? <EditInput onChangeText={setEditText} onSubmitEditing={() => editTodo(todo.id)} />
: <ToDoText style={{textDecorationLine: todo.isDone === false ? "none" : "line-through"}}>{todo.text}</ToDoText> }수정 아이콘을 누르면 해당 객체의 isEdit이 false에서 true로 바뀌는데 이것을 이용해서 isEdit이 true일 때는 <Text>를 보여주고 false일 때는 <TextInput>을 보여준다.
회고
리액트 네이티브 실시간 강의 들으면서 투두리스트 CRUD 기능 다 완성하고 firebase랑 연동해 보려고 했는데 데이터를 불러오는 것부터 잘 풀리지 않았다. 구글링 해봐도 정보를 잘 찾을 수가 없어서 튜터님께 질문하러 갔는데 30분 넘게 도움 받아서 해결할 수 있었다.
그런데 이렇게 튜터가 하라는 식으로만 로봇처럼 문제를 해결하는 건 내 실력이 늘 수 없는 방법이라며 쓴소리를 해주셨는데 내가 생각해도 충분히 혼자 해결할 수 있었을 문제라 이걸 혼자 해결하지 못한 내가 너무 바보 같아서 많이 속상했다. 그래서 저녁에는 기분이 별로 좋지 않아서 코드는 쳐다도 안 봤다. 잠시 휴식의 시간이 필요할 거 같다🛌🏼