[React] ToDo List

ByeolGyu·2024년 5월 26일

✔ React로 ToDo List 만들기

> App.js

전체 애플리케이션의 기본 구조를 제공

> Container.css

App 컴포넌트의 스타일 정의

- width: 80vw
: 컨테이너의 너비를 뷰포트 너비의 80%로 설정
- max-width: 1000px
: 컨테이너의 최대 너비 제한
- min-height: 700px
:컨테이너의 최소 높이 설정
- overflow-y: auto
: 컨테이너 내의 콘텐츠가 넘칠 경우 세로 스크롤바를 자동으로 표시함
할 일이 많아지면 컨테이너의 크기도 같이 늘어나도록 설정

> Title.js

App Component에서 전달받은 text를 출력

> Content.js

todo list 관리
사용자에게 입력 필드와 버튼을 제공 -> 새로운 할 일을 추가, 삭제, 수정

constructor()

컴포넌트의 초기 상태를 설정
- itemNum : 아이템의 고유 ID를 생성
- items : 할 일 목록을 저장하는 배열

render()

컴포넌트의 UI를 렌더링
- Stack 컴포넌트: 수평으로 정렬된 요소들을 생성
- TodoList 컴포넌트:
현재 items 상태를 items prop으로 TodoList에 전달

addTodo()

새로운 todo list 추가

newItem : 새로운 List 컴포넌트를 생성
key와 id는 itemNum을 사용하여 고유하게 설정
text는 입력 필드의 값을 사용
delete와 modify는 각각 아이템을 삭제하고 수정하는 메서드를 호출
상태 업데이트 : items 배열에 새 아이템을 추가 & itemNum을 증가
[...prevState.items, newItem]
: 현재 상태(prevState)에서 items 배열을 가져옴
=> 현재 items 배열의 모든 요소를 복사한 새로운 배열을 생성
=> 새로운 배열에 newItem을 추가(기존의 모든 아이템 뒤에 새로운 아이템을 추가한 배열 만듦)

deleteTodo()

특정 아이템을 삭제

- this.setState :
this.setState :
이전 상태를 가져와서 새로운 상태를 반환하는 함수를 인자로 받음
상태를 변경할 때 this.setState를 호출
=> 상태가 변경되었음을 알리고, 컴포넌트를 다시 렌더링하도록 요청

prevState.items.filter(item => item.props.id !== num)
: id가 num인 아이템을 제외한 나머지 아이템들로 새로운 배열을 만듬
상태 업데이트: 필터링된 배열로 items 상태를 업데이트

modifyTodo()

특정 아이템의 텍스트를 수정

prevState.items.map
: 기존의 아이템 목록을 순회하면서 각각의 아이템에 대해 처리
각 아이템에 대해 새로운 배열을 반환하며, 이를 통해 전체 아이템 목록을 업데이트

- if (item.props.id === id) :
조건문을 사용하여 특정 아이템을 찾음

- React.cloneElement :
해당 아이템을 복제 => 복제된 아이템의 text 속성을 newText로 변경하여 텍스트를 수정

> TodoList.js

Todo 항목들을 나열하는 역할

-content.js에서 전달받은 items props를 ul 태그 안에 리스트로 랜더링

> List.js

Todo 항목을 나타냄

render()

- id & text :
props로 전달된 값
- isChecked :
state에서 관리되는 값 (Todo 항목의 체크 여부를 나타냄)
- ListGroup.Item 컴포넌트 :
부트스트랩에서 가져온 리스트 그룹 아이템

- 배경 없는 버튼**
: background: 'none', border: 'none', padding: '0'으로 설정

check
: isChecked 상태에 따라 "💗" 또는 "🖤"이 표시
클릭 이벤트 => isCheck 메서드가 호출

remove
: 클릭 이벤트 발생 => props로 전달된 delete 함수가 호출됨 (content에 정의)

modify
: 클릭 이벤트 발생 => modifyText 메서드호출