(7-3) React - 간단한 TodoList 제작

국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다.

작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다..

 

소스코드는 깃허브 URL에 공개해 두었습니다. 

https://github.com/awse2050/ReactTodo

 

이 예제는 이전 게시물에 이어서 포스팅합니다. 자세한 건 상단 깃허브나, 이전 게시물을 참고해주세요.

---

이전 파일과 동일하게 이어서 진행합니다.

 

1. 우선 TodoList 컴포넌트에 배열을 추가하기 위해서 arr변수를 추가합니다.

  리스트 배열은 보통 추가하거나 삭제하는 등등 값이 변화가 이루어집니다.

따라서 변화된 값들을 표시하기 위해서는 렌더링이 필요하므로 useState를 사용하여 선언합니다

기본값으로는 빈 배열을 선언했습니다.

2.  이때 발생하는 문제는 배열의 인덱스 값을 어떻게 얻어낼것이냐가 문제입니다.

  인덱스의 값은 중복이 없어야 합니다. 예를 들어, 만약 배열의 length를 인덱스값으로 설정할 경우 

  삭제하고 추가할때 인덱스 값이 중복이 될 수 있기 때문에 설정하지 않고 

  일단은 따로 전역 변수로 설정하고 addTodo에 idx++ 를 추가하여 

  텍스트가 추가될 때 마다 증가하도록 설정만 하겠습니다.

3.  스프레드 연산자를 사용해서 arr의 배열을  그대로 꺼내서 현재 배열에 복사합니다.

 그리고 인덱스값과 입력한 텍스트를 저장해서 상태를 변경시키게 설정합니다.

 이후 todoList 컴포넌트에 arr의 정보를 props를 통해서 전달시킵니다. 

TodoList에서는 arr을 props로 받아낸 뒤에 콘솔 창에 그 내용을 찍어보도록 합니다.

 

결과를 보면 index.js에서 보내준 정보들을 todoList에서 나타나게 되고 

상위 컴포넌트에서 상태가 변경될 때마다 변경된 정보를 todoList 컴포넌트에 전달하며

이 컴포넌트에서는 그 결괏값을 도출하게 됩니다.

 

 

4. 새로운 컴포넌트인 TodoItem.js를 생성합니다. 

이 컴포넌트에서는 배열에 대한 정보를 TodoList를 통해 받아서 웹페이지에 표시하는 역할을 하게 됩니다.

 

 

5. index.js에서 삭제 기능(deleteTodo)을 추가하고

배열의 내용에 대한 스타일 변경하는 기능(changeTodo)을 추가합니다.

배열의 삭제는 'filter' 메서드를 활용하여 인덱스 값이 다른 값을 삭제하고 변경된 배열의 정보를 setState 하게 합니다.

 

6. 앞서 생성한 기능들을 todoList 컴포넌트의 props로 전달합니다.

 

 

7.  todoList 컴포넌트에서는 props로 두 가지의 기능을 받고 

 arr배열을 가지고 map메서드를 사용하여 todoItem 컴포넌트에 전달하게 하는데 이 결과물들을

listEle 변수에 저장시킵니다. 그리고 이 변수를 <ul> 태그로 감싸서 return 시킵니다.

map을 사용했으므로 key값 또한 전달하는데 arr이 가진 idx를 전달해야 하므로 item.idx를 key값으로 지정합니다.

todoItem컴포넌트에서 이 props들을 활용해서 전개할 것입니다. 

 

 

8. TodoItem에서는 li태그를 생성하여 그 안에 <p> 태그와 <button> 태그를 생성시켰습니다.

 TodoList컴포넌트에서 배열(arr)의 정보를 item로 전달시켰습니다.

따라서 입력하는 텍스트들은 item의 text변수에 들어가므로 item.text를 <p> 태그의 내용으로 표시합니다.

 

더블클릭을 할 경우 클릭한 <li> 태그 값의 idx가 상위 컴포넌트에 전달되고 complete의 값이 변경되며

색상이 변경되게 설정이 되어있습니다.

 

버튼의 경우 클릭 시 해당 idx값을 전송시키고 그 값을 비교하여 삭제하도록 합니다.

 

 

9. 그 결과로 값에 대한 idx , text , complete(색상)에 대한 정보를 볼 수 있게 됩니다.

 

 

만약 더블클릭을 할 경우 값에 대한 정보가 새롭게 나타나면서 배열의 2번째 값의 complete가 'true'로 바뀌면서

색상이 빨간색으로 바뀌는 것을 확인할 수 있게 됩니다.

 

 

---

개인적인 정리용 포스팅이기 때문에 설명이 정확하지 않은 점이 많습니다..

불편하더라도 그냥 이런 친구가 있다 생각하시면서 넘어가 주셨으면 합니다