리액트(REACT) - 간단한 todolist 만들어보기

2048 개발중 벽에 막혀서 간단하게 다른걸 한번 만들어보려한다

기본 틀은 이런느낌이다.

일단 전체 코드는 이렇다

 

실행시켜보면 이렇다

 

이제 reducer을 작성해보자

 

todoData 안에는 content,data,done 여부를 넣어줄 예정이다.

 

이제 버튼을 누르면 todoData에 데이터를 넣어주게끔 해보자

 

일단 input과 button을 <form>으로 묶어주고 button type을 button으로 해줬다.

왜 button 타입을 button으로 설정해줘야하는거지? 했는데 설정하지 않으면 기본값으로 submit이 설정되어버린다.

 

그리고 input 창에 들어오는 값을 setTodo를 통해 todo값으로 설정해줬다.

 

다음으로 버튼을 누르면 todoData에 값을 넣어주는걸 구현해보자

 

버튼에 onClick을 넣고 onClickBtn 함수를 만들어줬다.

 

그런다음 dispatch에 type은 Create로 하고 newItem을 담아 전달했다.

 

그런다음 todoDate에 새로운 아이템과 그전에 들어있던 state를 담아 전달하게끔 했다.

 

그러고 버튼을 눌러보니

 

state is not iterable이라는 오류가 떴다.

 

https://velog.io/@minho100227/useReducer-action.data-not-iterable-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0

useReducer action.data not iterable 오류 해결

관련 오류를 찾아보던 중 나와 똑같은 오류를 겪은 사람을 발견했고, 배열에 들어있는 객체를 spread로 뿌려줄 때 발생하는 문제라는것을 알 수 있었다.

 

그런데 spread는 원래 객체를 뿌려줄 때 사용하는 연산자가 아닌가 하는 의문점이 들었다.

 

이 의문점은 나중에 해결하고...

todoData에 임시 mock 데이터를 넣어주고

newState에 action.newItem과 state 두개 전부 spread 연산자를 빼고

 

오늘할일1 이라고 쓰고 제출해보았다.

 

그랬더니 [{오늘할일1 객체},todoData : [{임시객체}]] 이런식으로 할당이 되었다.

내가 원하는건 todoData : [ {임시객체}, {오늘할일1 객체}] 이런 형식이었는데 말이다..

 

일단 삽질해보자

 

첫번째 시도

 위와 같이 state.todoData를 spread로 뿌린 값을 todoData에 넣고, 그 뿌린 값과 action.newItem을 하나로 담아 return 해주려 했다.

state.todoData는 뿌릴 수 없는 값이라며 오류가 났다... 다른방법을 시도해보자

 

두번째 시도

그럼 state.todoData는 그대로 복사하고 todoData를 spread로 뿌리면 어떨까 하는 생각이 들었다.

 

일단 오류는 안났는데...

할일 1을 입력한 후 할일2를 입력하면 할일1이 undefined로 되어버렸다.

 

세번째 시도

?? 원하는대로 잘 들어갔다.

 

그런데 여기서 문제가 또 발생했다.

 

 

 바로 할일을 입력하면 그 전 할일은 지워지고 들어간다는 점이었다...

 

아무리 생각해도 왜그런지 몰랐던 찰나...

 

todoData를 todoDate로 잘못 작성하여 새로운 객체가 생성이 되었던것...

console.log부분에도 todoDate라 잘못 작성했다..

 

 

오타 수정해주니 원하는대로 잘 돌아간다.

 

다음으로 화면에 저 데이터들을 뿌려주기 위해 아래와 같이 코드를 작성했다.

그런데 아무것도 나타나지 않는다. gpt한테 고쳐줘 해봤다.

 

 

가장 큰 문제는 소괄호를 대괄호로 쳐줬다는 점이다. 이부분을 고치니깐 제대로 동작했다.

잘 동작한다.

 

그다음 할일 수정과 삭제를 만들어 보겠다.

할일 업데이트 버튼과 삭제버튼을 만들어주고

 

업데이트는 prompt창을 띄워서 거기서 수정할 수 있게끔 해줬다.

빈내용은 정규표현식을 이용해 판단해 주었다.

그러면 이런식으로 내용을 입력할 수 있는 창이 뜨고

빈내용을 입력하면 다시 한번 입력 할 수 있는 창이 뜬다.

 

그런다음 수정한 내용을 한번 취소할 수 있게 해보자

confirm을 이용해 확실히 수정할건지 물어보았다.

 

그런데 오류가 발생하였다.

https://stackoverflow.com/questions/63311845/unexpected-use-of-confirm-no-restricted-globals

Unexpected use of 'confirm' no-restricted-globals

스택오버플로우를 찾아보니 window를 앞에 붙여주면 해결된다한다.

 

 

잘 작동한다.

 

그런데 취소버튼을 눌렀을때 null값의 length를 계산하게 되어 오류가 발생한다

 

조건에 !returnValue를 추가해줬다. 자바스크립트에서 null은 false값이기 때문이다.

 

그다음 dispatch로 데이터를 넘겨보자

 

그런데 생각해보니 어떤 요소가 업데이트되었는지 알 방법이 없다..!

useRef를 이용해 인덱스를 부여해줘보자

index라는 useRef를 만들어주었다.

그런다음 mok 객체에 idx라는 값을 넣어주었고

새로운 객체가 만들어질 때마다 index 값을 +1 해주었다.

 

잘 들어가 있는 모습을 볼 수 있다.

 

그런다음 매개변수로 idx값을 전달하여 다뤄볼려 했는데

계속 alert창이 뜬다. 즉시실행함수가 된건가? 싶어서 gpt한테 물어보았다.

 

음... 한번 자세하게 알아보자.

 

https://infiduk.github.io/2022/09/08/react-onclick.html

INFIDUK Blog

함수가 실행되면서 컴포넌트 값이 계속 갱신되면서 무한루프에 빠져버리는 듯 하다.

 

 

함수의 참조값만을 전달하기 위해 다음과 같은 익명함수를 만들었다.

그러고 dispatch의 updateItem 값을 배열로 묶어주었다.

 

그러고 구조 분해로 updateIdx, updateItem 에 각각의 값을 넣어주고 todoData라는 상수를 하나 만들어주어 그 값에 원래 객체를 복사해주고,  updateIdx로 원하는 값만 수정해주었다.

잘 수정되었다!

 

다음은 삭제 기능을 구현해보자

삭제기능도 삭제하기전에 alert 창으로 진짜 삭제할건지 물어보고 삭제를 하려 한다.

참일 경우만 dispatch하도록 했고

filter을 이용해 index가 같지 않은것만 남도록 하였다.

 

잘 삭제된다.

 

그다음 입력 버튼을 누르면 작성한 내용은 지워지게 해보자

setTodo("")를 추가해서 해결했다.

 

이것저것 만져보던중 버그가 발생했음을 알수 있었다.

 

자바공부하기라는 걸 만들고 업데이트 하려고 하면 엉뚱하게

마지막 임시3이 수정되는 것이였다.

알고보니 이부분에서 객체 속 idx를 다룬게 아니라 객체의 index로 접근하다보니 이런문제가 발생한 것이다.

 

map을 이용해 해결하였다.

 

다음으로는 엔터 클릭시 작성한 내용이 제출되게 해주었다.

 

엔터 클릭시 onClickBtn이 실행되게끔 해주고

input에 onKeyDown으로 넣으니깐 엔터를 누르자 마자 새로고침이 되는거 아닌가

 

https://haenny.tistory.com/80

[JavaScript] input 태그에서 엔터했을 때, 새로고침 현상 막기

 

다양한 방법이 있었지만 나는 그냥 form을 div로 고쳐줬다...

 

그다음 완료 여부를 나타낼 수 있는 체크 버튼을 만들고, 체크 되었을시 취소선이 그어지도록 해보자

 

이부분은 Read 부분에 작성해보기로 하자

먼저 checkBox를 만들었다.

 

이제 onClickCheckBox 함수를 작성해보자

클릭 되었을시 dispatch되도록 해주었다.

 

READ 부분에서 idx가 같으면 done 부분을 true로 만들어주었다.

그리고 삼항연산자를 통해 done 이 참이면(이미 한일 이라면) 취소선을 그어주었다.

 

잘 작동한다

 

이번엔 체크를 풀었을 시 취소선이 사라지게 해보자부터는 다음시간에...