[트러블 슈팅] CRA 투두리스트 구현하기 (feat: 자주 실수하는 이슈)

🎯 CRA 투두리스트 구현하기

 

 

todos type

 

Props 배열임을 표시

TodoList.tsx

 

todos: [] 라고 적었을 때의 오류 메시지

 

 

 

API문서, body

 

공식문서에 적힌 대로 data에 todo를 적어 요청한다.

⚠️ todo가 아닌 text를 적어서 400 오류가 발생

todoItemApi.ts

 

API 문서

 

 

 

 

useState 상태 값 관리

 

불변성 유지를 위해 스프레드 연산자를 사용한다.

각 키값에 해당하는 value를 할당한다.

setState는 비동기 처리 객체이다.

 

🔗 react useState 상태 값 업데이트

 

 

 

 

회원가입 유효성 검사

 

정규표현식으로 값을 검사할 때는 state 값 대신 e.target에서 받아온 value 값을 넣어줘야 한다.

 

⚠️ 그렇지 않으면 다음과 같은 이슈가 발생한다.

• [x] 값 올바르게 입력했다가 지웠는데 에러처리 안 되는 이슈
• [x] 비밀번호 검사에 비밀번호와 다르게 값을 1자리 더 입력해야 하는 이슈

 

SignUpPage.tsx

 

 

 

passwordCheck 유효성 검사

 

✅ 59-64

❌ 66-71 : useState의 비동기 처리 때문에 값이 반영되는 것이 한 박자 느리다.

 

SignUpPage.tsx

 

 

 

getTodo, 투두 값 조회

 

받아오는 투두 값이 Array 형태가 아니라고 뜨는 오류

콘솔로 response에 어떤 데이터가 들어 있는지 확인한다.

response.data로 한 뎁스 더 들어가면 정상 작동한다.

 

return 값을 제대로 받지 못할 때

에러 메시지

데이터 형식

response.data로 수정 후 잘 동작

또는 todoItemApi.ts의 getTodos에서 response.data를 리턴할 수도 있다.

 

 

 

createTodo, 투두 값 추가

 

setTodos의 안에 스프레드 연산자로 불변성을 유지해주고, 새로운 todo값을 추가한다.

 

todoItemApi.ts의 createTodo 함수는 return response.data을 리턴한다.