[ToyProject-Todomate] 투두메이트 클론 프로젝트 23

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

 

오늘은 수정부분을 만들 차례! 실제로 책에서 도움을 받을 수 있는 부분은 서버 연결이라고 생각한다.

책에서는 엄청 단순한 앱을 만들기 때문이다 ㅠㅠ

어쨌든 투두 등록, 수정, 삭제가 기능의 대부분이니까 ...

 

 

수정에는 두 가지가 있다.

첫번째는 투두 상태 변화다.

투두에 체크를 하면 할 일을 완료한 상태이기 때문에 items state의 done 값이 true가 되게 하는 것과

이미 등록한 투두를 수정하는 것이다.

 

그리고 또 한 가지는 이미 등록한 투두를 클릭하면 내용을 바꿀 수 있게 하는 단계다.

이 단계가 좀 복잡하다.

 

 

 

우선 등록한 목표에 readOnly 라는 props로 상태를 표현해줘야 하는데, 책의 코드를 함수형으로 어떻게 변환해야 하는지 감이 안온다. 

 

  let goalItems = props.goal;
  let addGoal = props.addGoal;
  let deleteGoal = props.deleteGoal;

    function deleteEventHandler(e) {
      console.log( 'id : ',  e.target.id)
      deleteGoal(e.target.id, goalItems)
    }

 

 

위와 같이 만들어뒀던 props 들인데..

책에서는 

 

 

constructor(props) {
	super(props)
    this.state = { item : props.item, readOnly : true };
    this.delete = props.delete;
}

 

 

그럼 readOnly 변수를 따로 줘야 하는건지.. goalItems로 만든 props 를 객체로 만들어야 하는건지...

왠지 별도로 변수로 만들어 줘야겠지..?

아니 state에 추가해가지고 props로 만들어줘야하는거겠지..?

이 정도 공부했으면 찰떡같이 알아들어야하는데...

 

 

저번에 만든 goal state 아래에 readOnly state를 만들었다.

 

 

  let [readOnly, readOnlyChange] = useState(true)

 

 

그리고 다시 Goals 컴포넌트로 넘겨주었다.

 

 

<Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal} readOnly={readOnly}  />

 

 

그리고 offReadOnlyMode 라는 함수를 만들어 준다.

 

 

   // readOnly 상태 변경 함수
   function offReadOnlyMode(){
    console.log("Event!", readOnly)
    readOnlyChange(readOnly = false)
  }

 

 

이것들을 또 props로 다 넘겨준다.

 

 

 

<Goals goal={goal.items} addGoal={addGoal} 
deleteGoal={deleteGoal} readOnly={readOnly} readOnlyChange={offReadOnlyMode}  />

 

 

그리고 Goals.js에서 props로 받아와서 변수에 담고...

 

  let readOnly = props.readOnly;
  let readOnlyChange = props.readOnlyChange;

 

inputBase에 readOnly와 onClick 이벤트로 함수를 넘겨준다.

 

 

 <InputBase
   inputProps={{ "aria-label": "naked", readOnly: readOnly, }}
   onClick={readOnlyChange}
   type="text"
   id={item.id}
   name={item.id}
   value={item.title}
   multiline={true}
   fullWidth={true}
 />

 

 

이렇게 작성해주니 목표를 클릭했을 때, 콘솔에 readOnly가 false로 변했다!

 

이제 다시 enter를 누르면 readOnly를 true로 바꿔주는 함수를 작성한다.

이전에 작성한 enterKeyEventHandler와 유사하다.

 

 

  //readOnly 상태 true로 변경 함수
  function enterKeyEventHandler(e){
    if(e.key === 'Enter'){
      readOnlyChange(readOnly = true)
    }
  }

 

 

 

그럼 이 함수를 다시 props로 보내준다.

 

 

<Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal} readOnly={readOnly} 
readOnlyChange={offReadOnlyMode} enterKeyEventHandler={enterKeyEventHandler} />

 

 

다시 Goals에서 enterKeyEventHandler를 받아주고 (이전의 enterKeyEventHandler 함수는 GoalForm에 있음!)

onKeyPress로 함수를 사용해준다. 

 

 

<InputBase
  inputProps={{ "aria-label": "naked", readOnly: readOnly, }}
  onClick={readOnlyChange}
  onKeyPress={enterKeyEventHandler}
  type="text"
  id={item.id}
  name={item.id}
  value={item.title}
  multiline={true}
  fullWidth={true}
/>

 

 

 

이제 readOnly를 만들어줬으니 item을 수정해보자.

 

 

우선 수정 함수를 작성한다. state가 있는 곳에서 작성한다.

 

 //items state 수정 함수
  function editEventHandler(e){
    const thisItems = goal.items; // goal State 원본 카피
    thisItems.title = e.target.value;
    goalChange({items: thisItems}); //goalChange를 이용해 state 변경
  }

 

 

이 edit 함수를 props로 전달해 InputBase에 onChange로 연결한다.

 

 

<Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal} 
readOnly={readOnly} readOnlyChange={offReadOnlyMode} 
enterKeyEventHandler={enterKeyEventHandler} editEventHandler={editEventHandler} />

 

  let goalItems = props.goal;
  let addGoal = props.addGoal;
  let deleteGoal = props.deleteGoal;
  let readOnly = props.readOnly;
  let readOnlyChange = props.readOnlyChange;
  let enterKeyEventHandler = props.enterKeyEventHandler;
  let editEventHandler = props.editEventHandler;

 

<InputBase
  inputProps={{ "aria-label": "naked", readOnly: readOnly, }}
  onClick={readOnlyChange}
  onKeyPress={enterKeyEventHandler}
  onChange={editEventHandler}
  type="text"
  id={item.id}
  name={item.id}
  value={item.title}
  multiline={true}
  fullWidth={true}
/>

 

 

 

아이고 ㅠㅠ 작동이 안된다....ㅠㅠㅠㅠ

 

우선은 마무리로 체크박스를 클릭하면 done state가 true로, 클릭되었을 때, 클릭을 풀면 false로 바뀌도록 해본다.

 

  //체크박스 클릭 함수
  function checkboxEventHandler(e){
    const thisItems = goal.items;
    thisItems.done = !thisItems.done;
    goalChange({items: thisItems})
  }

 

 

이 함수를 props로 보내 checkbox 에 연결한다.

 

<Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal} 
readOnly={readOnly} readOnlyChange={offReadOnlyMode} 
enterKeyEventHandler={enterKeyEventHandler} editEventHandler={editEventHandler}
checkboxEventHandler={checkboxEventHandler} />

 

 

import React from "react";
import { Checkbox, IconButton, InputBase, ListItem, ListItemText } from "@mui/material";
import GoalForm from "./GoalForm";
import { ListItemSecondaryAction } from "@material-ui/core";

export default function Goals(props) {
  console.log(props);
  let goalItems = props.goal;
  let addGoal = props.addGoal;
  let deleteGoal = props.deleteGoal;
  let readOnly = props.readOnly;
  let readOnlyChange = props.readOnlyChange;
  let enterKeyEventHandler = props.enterKeyEventHandler;
  let editEventHandler = props.editEventHandler;
  let checkboxEventHandler = props.checkboxEventHandler;


  //목표 삭제 이벤트핸들러 함수

    function deleteEventHandler(e) {
      console.log( 'id : ',  e.target.id)
      deleteGoal(e.target.id, goalItems)
    }

    
 

  return (
    <>
    <GoalForm addGoal={addGoal} />

        {
        goalItems.map((item, idx) => {
         
        return ( <ListItem className="goals-wrap" key={item.id} > { console.log('item: ', item) }
                    <Checkbox checked={item.done} onChange={checkboxEventHandler} />
                    <ListItemText>
                    <InputBase
                        inputProps={{ "aria-label": "naked", readOnly: readOnly, }}
                        onClick={readOnlyChange}
                        onKeyPress={enterKeyEventHandler}
                        onChange={editEventHandler}
                        type="text"
                        id={item.id}
                        name={item.id}
                        value={item.title}
                        multiline={true}
                        fullWidth={true}
                    />
                    </ListItemText>
                    <ListItemSecondaryAction>
                    <IconButton aria-label="Delete Todo" id={item.id} 
                    onClick={deleteEventHandler} sx={{ fontSize: '14px' }}>
                        삭제
                    </IconButton>
                </ListItemSecondaryAction>
                </ListItem>
                );
            })
        }
    </>
  );
}

 

안된다...

 

 

왠지.. 삭제 구현했을 때의 문제처럼 클래스형에서는 this를 써서 이벤트를 잡아내는데 this가 빠져버리면서 어떤게 클릭되었는지 제대로 안잡혀서 그런 것 같다.

(e)가 있는데도...

 

둘 다 비슷한 문제인 것 같으니 나중에 수정해야겠다 ㅠㅠㅠㅠㅠ

 

 

이거 해결하면 입력 부분과 출력 부분 화면을 따로 분리시켜야겠음!!