ToyProject

지금까지 리액트를 공부하면서 기본기 부터 스타일링 까지 살펴보았는데, 계속 이론만 공부하는 것 보다 간단한 토이 프로젝트를 해보고 싶었다. 왜냐하면, 계속 일반적인 실습 보다는 실제로 하나라도 구현 하면서 놓쳤던 기본기를 잡아보고 싶었기 때문에.❗❗ 그래서 리액트를

* 프로젝트를 시작하기 전 컴포넌트 구성은 [Todo-List] 1. 프로젝트 구성을 참고하면 된다. 1. UI 구성 ✍ 컴포넌트는 src 디렉터리에 components 디렉터리를 생성하여 저장했다. Todo-List 프로젝트는 기능을 구현하기 전 UI를 먼저 구현하

앞서 생성한 컴포넌트들이 실제로 작성할 수 있도록 기능을 구현해보자. 1. App에서 todos 상태 사용하기 Todo-List 프로젝트는App 컴포넌트에서 나중에 추가할 일정 항목에 대한 모든 상태들을 관리한다. src/App.js 파일을 아래의 코드로 수정하였다.

Todo-List 프로젝트는 소규모 프로젝트라서 추가되어 있는 데이터가 매우 적기 때문에 속도나 성능 측면에서 문제가 없을 수 있다. 👉 하지만, 데이터가 무수히 많아진다면? 🤦‍♂️ 바로 느려지는 것을 체감할 수 있을 것이다. 이번에는 임의적으로 랙(lag)을

앞서 컴포넌트의 성능을 개선하기 위해 했던 과정들은 [Todo-List] 4. 컴포넌트 성능 개선 (1)를 참고하면 된다. 1. onToggle, onRemove 함수 바뀌지 않게 하기 1.1 useReducer 사용하기 useState의 함수형 업데이트를 사용하는