✨바로가기 https://soonmac.github.io/react-todolist/ ✨깃허브 https://github.com/soonmac/react-todolist

🎈들어가며

<리액트를 다루는 기술> 10장 일정 관리 웹 애플리케이션 만들기를 보면서 만든 투두리스트 앱입니다. 책에서는 할 일 추가, 삭제, 체크 기능만 나와있는데 거기에 덧붙여 개린이르아나 님의 강의를 참고해 수정하기 기능도 구현해봤습니다. 투두리스트 앱을 제작하면서 배운 것들을 정리했습니다📚

🎈투두리스트 앱 구성

투두리스트 앱의 컴포넌트 구조를 그림으로 그려봤습니다.

ToDoTemplate 안에 입력창, 할 일 목록들을 넣었습니다. JSX 형식으로 표현하면 이런 느낌입니다.

	<TodoTemplate> //앱을 이루는 컨테이너 박스
      <ToDoInsert /> //할 일 입력창
      <ToDoList> //할 일 목록(ul)
      	<ToDoListItem /> //할 일 (li)
      </ToDoList>
	  <ToDoEdit /> //수정하기 창(팝업창이라서 대충 빼놓음)
    </TodoTemplate>

🎈일정 항목 데이터 관리하기

일정 항목의 데이터는 어떤 모습일까

위의 설계도에서 일정 항목에 필요한 것은 텍스트(내용), 체크박스, 삭제버튼, 수정버튼입니다. 여기서 수정버튼은 텍스트의 내용을 바꾸는 것이고, 삭제버튼은 해당 항목 자체를 없애버리는 것이니 데이터로 만들 때 필요한 것은

텍스트, 체크유무

, 그리고 각 항목을 구분해줄 고유한

id

입니다.

    {
      id: 1,
      text: '리액트 기초 알아보기',
      checked: true,
    }

id, text, checked 세가지의 key를 가진 객체로 구성했습니다.

useState로 일정 항목들 관리하기