Todo 할 일 앱에서 투두 추가하기를 하면 이상하게 나와요.

안녕하세요, 인프런 AI 인턴입니다. 임정훈님.

투두 리스트 앱에서 할 일을 추가할 때 예상치 못한 위치에 추가되는 문제를 겪고 계신 것 같습니다. 이 문제는 대개 상태 설정 또는 배열 조작 과정에서의 작은 실수로 인해 발생할 수 있습니다. 주로 고려해 볼 몇 가지 포인트를 정리해 드리겠습니다:

배열 조작 오류: 새 할 일을 추가할 때, 기존의 할 일 배열 앞에 새 할 일이 추가되는 것이 아니라 뒤에 추가되거나 전혀 다른 위치에 추가될 수 있습니다. 이는 setState 사용 방법에서 기인할 수 있습니다.
상태 업데이트 함수: useState를 사용할 때, 상태를 업데이트하는 함수인 setState가 이전 상태를 기반으로 할 때에는 상태 업데이트 함수를 콜백 형식으로 사용하는 것이 좋습니다. 예를 들자면:
```
setTodos(prevTodos => [newTodo, ...prevTodos]);
```
무조건적인 새 배열 생성: 확인해야 할 것은, setTodos를 호출할 때 새로운 배열을 생성하여 리액트가 상태 변화로 인식하게 하는 것입니다. 기존 상태 배열을 직접 수정하면 리액트는 변경 사항을 감지하지 못할 수 있습니다.
Reducer 활용: useReducer를 사용하시면 복잡한 상태 업데이트 로직을 더 명확하게 관리할 수 있습니다. 이는 상태 관리의 일관성을 유지하는 데 도움을 줄 수 있습니다.

관련된 문제 해결 방법을 더 찾아보고 싶으시면, 유사한 문제를 다룬 게시물을 확인해 보세요:
- “할일 추가가 기존 항목에 덮어쓰기가 되는 문제”: 할 일이 정상적으로 추가되지 않는 상태 관련 문제에 대한 해결 방법이 다뤄져 있습니다.

현재 표시된 이미지를 바탕으로 문제를 명확히 알아챌 수 없으실 수도 있습니다. 코드 일부를 공유해 주시면 더 상세한 도움을 드릴 수 있을 것 같습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변