항해99 25일차 TIL - (리액트) 투두리스트 기능 업데이트 & 오늘 배운 것

728x90

🔹 최종 Git Hub 주소 : https://github.com/jennywoon/Final-todolist.git

✅ 두 번째 React Todo List 최종 완료!

항해에서 과제로 내 준 기능을 모두 구현하고 styled-component를 수정하면서, 기술매니저님께서 기능 업데이트를 해보라고 해서 2조 팀원들과 기능을 업데이트 해보았다! 업데이트는 총 6가지 이다.

1️⃣ Detail 페이지에 Layout을 연결하여 위에 Header 모양까지 보여주었다.

2️⃣ Header 상단에 머티리얼 UI 로 추가하였다.

3️⃣ 상세페이지에서 머티리얼 UI 버튼을 누르면 홈으로 돌아갈 수 있도록 기능 구현

4️⃣ ID 값 오류 수정

원래는

const nexiId = useRef(0)

id : nextId += 1

이런식으로 코드를 짰는데, 상세보기 페이지에 들어갔다가 다시 밖으로 나오고 추가하기 버튼을 누르면, 새로 생긴 투두리스트의 아이디가 1로 되는 것을 보고 오류를 수정했다.

let nextId = 2

// 2인 이유는, 초깃값 두 개가 있기 때문이다. 
// nextId += 1이기 때문에 세 번째 아이디를 산출하려면 2가 된다.
// let nextId는 const Form {} 안에 넣으면 오류가 나므로 그 밖에 작성한다.

5️⃣ InitialState 값 주기

const initialState = [
    {
		id: 1, // id는 모두 고유값
		title: "리액트 초보 2조",
		content: "열심히 공부중입니다",
		isDone: false
	},
    {
		id: 2, // id는 모두 고유값
		title: "두번째 투두리스트",
		content: "조금만 더 노력하자!",
		isDone: false
	}
];

리덕스 모듈 todos에 initialState 값 주는데, { } , 중괄호와 컴마를 잊으면 안 된다!

6️⃣ window.confirm 메소드 추가 : 정말 삭제하시겠습니까?

삭제하기 버튼을 누르면 정말 삭제할 것인지 확인할 수 있도록 메소드를 추가했다.

onClick={() => {
                        if(window.confirm("정말 삭제하시겠습니까?")){
                            dispatch(deleteTodo(todo.id))
                        }
                    }}

자바스크립트 공부하면서 당연하다 생각했던 조건문 구분의 그 조건 때문에, confirm을 굉장히 쉽게 구현했다.

if문과 while문 안에 들어가는 { } 안의 값은 true여야지만 반환을 한다.

즉, confirm 을 if와 함께 쓰면 확인 버튼을 눌렀을 때 true이므로, if { } 안에 조건과 반환식을 넣어주면

확인 버튼을 눌렀을 때만 삭제가 되고 취소 버튼을 누르면 말 그대로 취소가 된다!

새삼,, 자바스크립트 공부와 기본적 개념을 익히는 것의 중요성을 느끼는 중이다..

✅ 오늘 배운 것

1️⃣ 함수 : 지역 변수

🔹내 블로그 정리해둔 곳 : https://jenny0520.tistory.com/67?category=1031962

오늘 리액트 심화반 강의 1주차를 시작했는데, 자바스크립트 리마인드 주차였고 마침 생활코딩 자바스크립트 범위와 딱 겹쳤다. 비슷한 내용을 하루에 두 세번 보게되니 바로 기억이 되는 장점이 있었다.

정말 기본적인 이 개념들을, 몰라서 공부한다는 느낌은 아니다.

자바스크립트 기초부터 강의를 듣고 있으면 이건 이렇게 쓰면 되~ 라는 공부 방식에서, 이걸 왜 이렇게 썼는지를 알게 되는 장점이 있다.

기본기를 탄탄하게 하는 과정을 포기하지 말기! 바쁘다고 이 과정을 포기하면 나중에 코드 설명과 이해를 못하게 될 거라고 생각한다.

기본기 열심히! 내일도 꾸준히!!