Today I Learned 📖
1. Components 로 리팩토링
코드 리팩터링
주로 가독성을 높이고 유지보수를 편하게 한다.
버그를 없애거나 새로운 기능을 추가하는 행위는 아니다. 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 바꾸고 개선하는 유지보수 행위.
-> 리액트랑 똑같다.
2. Firebase 셋업 & Category 리팩토링
3. Firebase Todos 리팩토링
후발대 수업
Redux Toolkit, Axios 통신 -> 복습하기(1/3)
리액트네이티브 복습하기:)
- Add Task
1)데이터 구조를 잡는다.
2)구조를 잡은 데이터에서 text와 category값을 만듬
3)기존 todo값에 접근을 해서 setTodos 만들기
4)위에서 구조를 잡은 값들을 TextInput에넣기
value={text}
onChangeText={setText}
onSubmitEditing={addTodo}5)map 만들어서 텍스트값 뿌리기
{중괄호}를 쓰면 return값을 써야하는것 기억하기
- Set Category
1)onPress로 setCategory마다 js,react,ct 로 지정
onPress={() => {setCategory("react");}} 2)스타일로 백그라운드색상을 지정해주기
style={{...styles.tab,
backgroundColor: category === "react" ? "#FD8A8A" : "grey"}}
//삼항연산자 사용3)todo.map에 가서 if 조건문으로 카테고리와 같은 투두를 지정하는 작업을 해야한다. (todo에 이미 category가 들어가있다.) 활성화된 카테고리가 투두에 들어있는 카테고리면 리턴한다!
if (category === todo.category){리턴값}- Set Done
1)Set Done 함수를 만든다.
2)완료 버튼에 onPress를 주고 setDone의 todo.id값을 넘겨준다
3)todo 텍스트에 완료버튼을 눌렀을 경우 줄이 가게 해야하므로 todo 텍스트에 가서 아래와 같이 삼항연산자를 준다.
style={{textDecorationLine: todo.isDone ? "line-through" : "none",}}- Delete Task
1)삭제 함수(deleteTodo)를 만든다.
어떤 id를 가진 todo를 선택했는지 알아야하고, setTodos로 그 id를 가진 todo를 제외한 새로운 배열을 받아야한다(filter 돌리기)
const deleteTodo = (id) => {
const newTodos = todos.filter((todo) => todo.id !== id);
setTodos(newTodos);}2)삭제버튼에 onPress를 만들어줌
3)삭제 알람창 만들기(Alert API를 이용)
- Edit Task
1)isEdit토글링 하는 함수만들기(setEdit함수)
->setDone이랑 원리가 같다
->수정 버튼에 onPress를 만들어줌 (setEdit)
2)text에 가서 삼항연산자로 isEdit토글링 만들기
3)useState를 만든다. 수정시 들어가야하는 값을 위해
const [editText, setEditText] = useState("");4)TextInput에 위에 만든 값 넣기.
value={editText}
onChangeText={setEditText}5)editText를 보내주는 onSubmitEditing에 들어갈 함수 만들어주기
- id값을 받아서 해당 배열의 요소를 찾는다. (idx찾기)
newTodos[idx].text = editText;6)TextInput에 editTodo 넣기.
onSubmitEditing={() => {editTodo(todo.id);}}주석달기의 생활화!!!!!!
참고
일치 비교 연산자(===, !==)는 형변환을 하지 않은 상태에서 두 피연산자가 서로 같은지 비교를 진행한다.
따라서 일치 비교 연산자(===, !==)는 두 피연산자의 자료형까지 모두 일치/불일치해야하는 경우에 사용하면 적절할 듯 하다.
오늘의 회고 🫥
파이어베이스를 공부할때마다 느낀다. 이걸 꼭 해야하나,,?
그래도 프로젝트가 코앞이니까.. 해야지.. 해야하는데.. 어렵다 진짜....
