Todo 앱을 만드는 것은 새로운 웹 기술을 배우기 시작했고 무언가를 구축하는 연습을 원하는 모든 사람에게 항상 좋은 아이디어입니다. 왜냐하면 그것은 일종의 가장 간단한 CRUD 앱이기 때문입니다.

저는 React Hooks와 LocalStorage로 Todo 앱을 만들어왔고 어떻게 만들었는지에 대해 쓰고 있습니다.

누구라도 쉽게 단계를 따를 수 있도록 매우 자세하게 설명하려고 합니다(또한 많은 코드 주석 🤪). 그러나 모든 질문을 환영합니다.

TL; DR

다음은 Github 저장소입니다. https://github.com/ducdev/todo-app-react-hooks-localstorage

데모: https://todo-app-react-hooks-localstorage.netlify.app/

좋습니다, 시작합시다!

작업 공간에 Node.js 및 NPM이 설치되어 있다고 가정합니다.

이제 이 명령을 실행하여 Create React App으로 새 React 프로젝트를 초기화해 보겠습니다.

npx create-react-app todo

그리고 지금:

cd todo
npm start

현재 기본 React 애플리케이션은 다음 위치에서 실행 중입니다.

http://localhost:3000/

생성된 프로젝트의 코드를 열면 App.js 디렉토리에 src가 표시됩니다. App.js의 이름을 Todo.js로 변경하고 아래 코드 변경에 따라 코드를 수정합니다.

코드 변경:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/42ab20edd451ea87619cad15314c9afe995bcb6a

파일을 저장하면 기본 React 앱이 이제 Todo 제목 텍스트만 표시되는 것을 볼 수 있습니다.

다음으로 TodoList & TodoItem 를 만든 다음 모의 배열로 렌더링합니다.

코드 변경:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/b002cb5772c5ff8262df706d3a54d06008875db5

이제 가짜 Todo 목록이 생겼습니다 👏

이제 새로운 Todo를 추가할 수 있는 입력을 생성하겠습니다. 위에서 언급했듯이 브라우저의 LocalStorage를 사용하여 Todo 앱의 데이터를 보관하므로 브라우저 창을 새로 고칠 때 Todo 목록이 지워지지 않습니다.
formik를 사용하여 양식을 만들고 yup로 양식 값의 유효성을 검사한다고 가정하므로 이 패키지를 추가하려면 이 명령을 실행해야 합니다.

npm i formik yup

코드 변경:

https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/f61da2a15cbbcd5929f01545800c94a3309974d6



기본적으로 이제 새 Todo를 추가하기 위한 양식이 있으며 각 Todo 항목에 대해 제거 버튼을 만듭니다.



코드 변경:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/57af5f2e5414709407345eef323cb97a59a76f8b

Todo 항목을 완료 또는 보류로 표시하고 싶을 수 있습니다.



코드 변경:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/c3e90764641ffb16a80c5457f2f6714ef864e4b7

때로는 Todo의 텍스트를 편집해야 할 때도 있습니다.



코드 변경:

https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/933eff9f3a5bcb0111032fbea5ba37b8d0dacae5

몇 가지 스타일 지정, 개선 및 유효성 검사를 추가할 시간입니다.
이번에는 SASS를 사용하여 node-sass를 추가해야 합니다.

npm i node-sass

코드 변경:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/d64447083a2ada0112c735d5329f59a1bd4cc9a4

앱이 제대로 렌더링되는지 확인하기 위해 테스트를 추가하는 것을 잊지 않습니다. Create React App은 React Testing Library를 주장을 위한 선택기로 사용합니다. 그렇기 때문에 앱의 종속성 트리에 다른 항목을 추가할 필요가 없습니다.

코드 변경:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/c71edb6ef9b15396ea3ee6aed481bf7b3ad5b762
To run the test

npm run test

마지막으로 앱을 배포하고 사용할 준비가 되었습니다. 게시물을 즐기시기 바랍니다. 제가 더 잘할 수 있는 일이 있다고 생각하시면 아래에 댓글을 남겨주세요 ^_^