프론트엔드 서비스 개발

Todo 리스트

컴포넌트란 리액트로 만들어진 앱을 이루는 최소단위.
간단한 checkbox와 label을 렌더링 하는 컴포넌트.
화살표 함수의 제한점
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
자바스크립트 변수
https://www.howdy-mj.me/javascript/var-let-const

Todo 컴포넌트를 화면에 출력하기 위해 App 컴포넌트의 render 함수에 Todo 컴포넌트를 추가.

실행 화면.

Props과 useState Hook

프로젝트의 요구사항인 Todo 리스트를 출력해야함.
이후 API에서 받아온 임의의 Todo 리스트를 출력할 수 있어야함. 임의의 Todo 리스트는 각 Tod마다 다른 타이틀을 가지고 있음. 따라서 Todo 컴포넌트에 title을 매개변수로 넘겨야함.

Hook : 리액트가 제공하는 기능과 상태변수를 사용할 수 있음. --> 리액트가 제공하는 useState와 같은 일련의 함수들을 훅이라고 함.

상태 변수 : 시간이 지남에 따라 컴포넌트의 사용자가 컴포넌트와 상호작용하는 동안 변경되는 변수를 의미.
함수안에 선언된 변수는 함수 종료와 함께 사라진다.
하지만 애플리케이션의 화면은 사용자의 입력, 수정에 따라 화면이 변해야한다.
상태를 리액트가 계속 추적하고, 상태가 변할 때마다 함수를 다시 불러 새상태가 화면에 나타나도록 다시 랜더링해야 한다.
리액트에게 오브젝트가 상태라고 알려주는 함수가 useState 함수이다.
즉 필요할때마다 자동으로 불러올수 있게 함.

useState 함수에 상태를 추적할 오브젝트를 매개변수로 넘김으로써 상태를 사용.
useState는 배열을 반환.
배열의 첫 번째 값은 상태로 지정한 오브젝트.
두 번째 값은 이 상태를 업데이트할 수 있는 함수. --> setItem.

Todo의 props에 item을 넘겨주는 법.

props 는 properties 의 줄임말이며. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용

App.js 에서 useState를 이용해 item 초기화.
이후 <Todo에 item = {<변수>}를 이용해 props로 매개변수를 넘길 수 있다.

연습

meterial-ui를 이용한 디자인

UI를 위한 다양한 컴포넌트 제공, 전부 컴포넌트로 구성. --> CSS를 이용하지 않고 UI를 개선.
ListItem, ListItemText, InputBase, Checkbox 등의 컴포넌트.

Todo추가

UI만 존재 기능은 없다.

App.js return에 변화. import AddTodo 확실히 해줘야함!!!

AddItem 핸들러 추가.

'+' 버튼의 기능을 추가. AddItems 기능을 추가하려면 핸들러 함수를 연결.

onInputChange() : 사용자가 인풋플드에 키를 하나 입력할때마다 실행되며 인풋필드에 담긴 문자열을 자바스크립트 오브젝트에 저장.
onButtonClick() : 사용자가 + 버튼을 마우스로 클릭할 때 실행되며 onInput Change에서 저장하고 있던 문자열을 리스트에 추가.
enterEventKeyHandler() : 사용자가 인풋필드상에서 Enter 또는 Return 키를 눌렀을때 실행, 기능은 onButtonClick과 같음.

컴포넌트 state에 추가할 Todo 기억하기

onChange : 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지.
onChange를 porps로 받는데 이는 TextFiled에서 키보드를 한 번 누를 때마다 실행.
따라서 onChange에 핸들러 함수 onInputChange를 연결 해 키보드 입력 값을 item에 저장.

함수 집중 탐구

Add 함수 작성

'+'를 눌렀을 때 todo 아이템을 추가할 함수.

AddTodo 컴포넌트는 상위 컴포넌트인 items에 접근 할 수 없지만 상위 컴포넌트인 App 컴포넌트가 items를 관리하기 때문에 접근할 수 있다. 따라서 새 item을 리스트에 추가하는 함수는 App 컴포넌트에 작성할 수 있다. 즉 App 컴포넌트네 addItem()를 추가.

App.js

AddTodo 에 add함수 이용

add 컴포

엔터키 입력 시 아이템 추가

AddApp

Todo 삭제

각 리스트 아이템 오른쪽에 삭제 아이콘 추가.
삭제 아이콘 누르면 삭제하는 기능 추가.

App.js에 deleteItem() 작성.

App.js <Todo 에 추가.

Todo.js


삭제 아이콘에 deleteEventHandler() 연결.

Todo 수정

체크박스 체크, 타이틀 변경.

체크박스 체크의 경우 item.done의 값을 변경.

타이틀의 경우 아이템의 title부분을 클릭 하면 자동으로 수정가능 상태가 된후 사용자가 Enter키를 누르면 수정 내용 저장.

1. Todo 컴포넌트에 ReadOnly 플래그 ==> true 수정 불가 / false ==> 수정가능
2. title 클릭시 해당 인풋필드는 수정 가능한 상태, readOnly가 true인 상태
3. Enter 또는 Return 키를 누르면 readOnly가 true 가 됨.
4. 체크박스 클릭시 item.done값을 전환.

Todo.js

ReadOnly True

엔터키를 누르면 readOnly종료.

Item 수정 함수

커서가 깜빡인다고 수정 가능 하지 않음, App.js 에 editItem() 함수를 작성해 Todo.js 프로퍼티로 넘겨줘야 함. Todo.js 에서 사용자가 키보드의 키를 입력할 때마다 item의 title을 새 값으로 변경해야 한다.

App.js


Todo.js

checkbox 업데이트

Todo.js


컴포넌트의 onChange에 연결.