React_to-do_7

 

7. To-do_1

: 리액트 확장 프로그램 추가하기

 

 

이전 포스팅에서 React.memo를 통해 console을 찍으면서 리렌더링의 유무를 확인했었다.

이건 리액트 확장 프로그램을 통해서도 확인할 수 있다.

 

 

 

구글에서 '크롬 확장 프로그램'으로 검색을 해서 크롬 웹 스토어에 들어가 리액트를 검색하면

 

이렇게 개발 툴이 나오고

 

 

 

여기서 크롬에 추가를 하면 바로 확장 프로그램이 추가된다.

 

 

이제 우리가 만든 앱을 크롬으로 시작하면 리렌더링 되는 부분을 설정에서 보이도록 설정했을 때... 리렌더링 되는 부분이 색깔로... 표시된다고 한다...

 

나중에 크롬으로 열어서 확인해봐야겠다!!

 

 

---

 

 

7. To-do_2

: 할 일 리스트 모두 지우기 버튼 생성

 

 

이건 간단하게 할 수있다.

 

App.js에서 할 일 목록 다음에 handleRemoveClick 함수를 가지는 버튼을 생성하고

 

 

 

이렇게 간단하게 setTodoData를 빈 배열로 만들어주면

 

화면에서 확인했을 때 모든 목록이 잘 지워지는 것을 확인할 수 있다.

 

 

 

---

 

 

7. To-do_3

: 할 일 목록 수정하는 기능 추가하기

 

 

 

 

우선 기존 목록을 수정하고 수정한 값으로 저장되게 만들 것이다.

 

그러면 수정 중인 경우에는 UI가 다를 것이기 때문에 새로운 UI를 제공하기 위한 state를 생성했다.

 

 

이렇게 List.js에서 두 개의 state를 만들었다.

isEditind은 처음엔 false로, editedTitle은 처음에 기존 title을 초기 값으로 넣어주었다.

 

 

 

 

이제 수정할 수 있는 버튼인 Edit 버튼을 추가해주고 이 버튼을 클릭했을 때, isEditing state 가 true로 바뀌도록 해줄 것이다.

 

 

이렇게 x 버튼을 만든 것처럼 Edit 버튼을 똑같이 만들어주고 클릭 시 setIsEditing이 true가 되도록 해주면

 

 

 

촤찬!! x 버튼 옆에 Edit 버튼이 생겼다!!

 

 

 

 

 

이제 조건에 따른 UI 렌더링을 해주자. 즉, Edit을 누르면 해당 목록은 수정하는 것으로 목록 부분이 바뀌어야 하니까

조건문을 사용하여

isEditing이 true인 경우에 우선 작동하는 지 확인하기 위해 editing이라는 텍스트가 출력되도록 해주고

그렇지 않은 경우에는 기존의 return 문을 넣어줬다.

 

그러면

 

이렇게 Edit 버튼을 눌렀을 때, editing 텍스트가 잘 나오는 것을 확인할 수 있다.

 

 

---

 

 

그럼 이제 editing 시 UI를 작성해보자. else 부분의 UI (return 부분)을 가지고 와서 수정할 것이다.

 

 

우선 기존의 return 문에서 큰 div에 드래그앤 드랍과 관련된 모든 UI를 지워줬다.

editing 시에는 드래그 앤 드랍 기능이 불필요하기 때문이다.

 

 

 

 

그리고 input 태그는 form 태그로 감싸주자! 왜냐면 수정하는 부분은 따로 UI처리가 되어야 수정 중인지 알 수 있기 때문에... 이건 결과 화면을 보면 이해된다.

이렇게 form 태그로 우선 input 태그를 감싸주고 기존의 내용은 삭제삭제.....

이 input 태그는 새로 수정하는 내용이기 때문에 value로 아까 새롭게 만든 editedTitle state를 받으면 된다.

그리고 className으로 새로운 스타일링을 해줬다.

추가적으로 form 태그 아래의 span 태그도 그냥 없애주면 된당~!

 

 

 

 

 

이제 save 버튼을 구현할 것이다. 이 버튼을 누르면 수정한 값으로 기존 목록의 이름이 대체되게 할 것이다.

좌잔... 우선 x 버튼을 누르면 수정하고 있던 내용이 기존의 내용으로 돌아가야 하기 때문에

onClick 시 setIsEditing 부분을 false로 바꿨고

 

save 버튼 태그에선 type을 submit으로 해줬다.

 

 

 

 

여기까지 구현한 화면은

이렇게 생겼다!! 하하하를 감싸고 있는 검정색 테두리가 form 태그인 것이다.

 

여기서 이제 하하하를 수정하려고 하면 되지 않는다... 아직 구현을 덜 했기 때문이지!!

 

 

 

 

 

 

이어서 구현해보면

아까 input 태그에 onChange로 수정을 할 때, 새로운 handleEditChange 함수가 호출되도록 해주었고

 

 

handleEditChange 함수는 인자로 event를 받은 후, editedTitle의 setter인 setEditedTitle을 이용해서 해당 event의 target의 value로 넣어주면....(참놔 이거 말이 넘 웃김...)

 

 

 

이렇게 수정이 잘 된다!! 신기하네.... 쩝

 

 

 

 

 

이제 마지막으로!!!!! Save 를 추가 구현하면 끝이다.

요롷게 input 태그를 감싸줬던 form 태그에 onSubmit 시 handleSubmit 함수를 호출하도록,

요롷게 Save 버튼 태그에서 onClick시 handleSubmit 함수를 호출하도록 해주었고

 

 

handleSubmit 코드다....

좌... 우선 인자로 당연히 event를 받았고~ event.preventDefault는 이전에도 했던 것처럼 화면이 뜨고 초기 화면으로 돌아가는 것을 막아주는 것이었다!!

 

자.. 그리고 todoData에 map 메소드를 사용하여 지금 Save 버튼을 누르려고 하는 그 목록의 id가 기존 목록의 id와 같다면(사실 당연한거지.. id는 변하지 않고 입력 값만 바뀐 상태니까)

목록의 title을 지금 바꿔준 editedTitle로 변경한다!! editedTitle이 input 태그에서 value로 써준 값이니까!!

 

그리고 setter를 이용해 이렇게 변한 newTodoData로 업데이트 해주고

setIsEditing은 false로 해주면 정말 끝이다...

 

 

 

 

 

짜잔!!! 이렇게 Save 누르면 저장됨ㅠㅠㅠ흐어어엉

 

 

---

 

 

 

7. To-do_4

: localStorage에 todoData 값 담기

 

 

localstorage에 값을 담아 놓지 않으면 페이지를 새로 고침했을 때, 기존의 입력 값이 모두 초기화 된다.

 

따라서 로컬 스토리지에 todoData 값을 담아서 페이지를 refresh해도 todoData가 계속 남아있도록 해주자.

 

 

우선 setTodoData를 이용해서 todoData의 state를 바꿔줄 때, 로컬 스토리지에도 같이 바꿔줘야 한다.

당연한 말이지!!!

 

 

 

 

자

이렇게 모든 파일에 있는 setTodoData를 찾아서

 

 

setTodoData(newTododata) 뒤에 로컬스토리지를 작성해준다.

 

로컬 스토리지는 기본적으로 key 값과 value 값으로 이루어진 데이터를 저장할 수 있다.

그래서 setItem 메소드를 사용하여 첫 번째 인수에는 key 값, 두 번째 인수는 value 값을 넣어주면 되는데

우리는 순서대로 todoData와 newTodoData를 넣어주면 된다.

 

 

여기서 주의할 점!!

로컬 스토리지는 오직 문자형(string) 데이터 타입만 지원한다.

 

따라서 JSON.stringfy를  통해 새로운 newTodoData를 문자형으로 바꿔줘야 한다. (value에 그냥 배열 객체로 들어가면 안 된다.)

 

 

이제 이 짓을 모든 setTodoData(newTodoData)뒤에 해주면 된다.

 

 

 

다만

이런 부분은 그냥 newTodoData가 아니라.. 위의 코드 상황을 잘 보고 판단해서 수정해줘야 한다.

 

 

이런 식으로!!! 그때 그때에 맞춰서...

 

 

---

 

 

이렇게 하면 로컬 스토리지에 모두 저장이 된 것이다... 촤촤

이제 새로 고침을 했을 때, 로컬 스토리지에 저장된 내용을 가져와야겠지??

 

 

 

App.js에서

이렇게..... App 함수 위에 initialTodoData를 만들어준다.

 

이번엔 getItem 메소드를 사용해서 todoData를 가져온다.

만약 todoData가 있다면, 로컬 스토리지에 문자형으로 저장해줬으니까 이를 다시 parse로 가져와서 문자형을 객체로 반환한다. 

todoData가 없다면 빈 배열을 준다.

 

이제 이 initialTodoData를 11번째 코드처럼 todoData state의 초기 값으로 넣어주면

 

 

 

정 말 끝 이 다.

 

---

 

 

하....지ㅁ....만ㄴ.....

또 다른 문제가 생겼으니

 

 

이렇게 체크 박스를 선택하고 새로 고침을 하면

다른 건 다 여전한데 체크 박스만 풀림.... 어이없어

 

화면을 새로 고침 하지 않고 체크 박스를 선택한 상태에서 수정을 해주면 역시나 위의 사진처럼 체크 박스만 풀린다.

 

 

 

문제는

여기 else 문에서 checkbox의 defaultChecked 값이 false로 되어있었기 때문이다...

이를 completed로 바꿔주면

 

 

모 두 해 결!!! 드디어ㅠㅠㅠㅠ 감동.....

 

 

 

이렇게 해서 모든 투두 앱 구현이 끝났다.. 물론 강의에서 원하는대로..!!!