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

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

 

---

 

이제 해보아야 할 것은 이런 것이다.

 

 

조건문으로 어떤 상태가 add 이면, <GoalForm /> 컴포넌트가 Goal 컴포넌트 위 자리에 있고,

상태가 edit으로 바뀌면 <GoalEditForm /> 이 Goal 컴포넌트 위에 있는 것이다.

 

 

 

 

왜 이렇게 생각했냐면 document.querySelector로 내부 내용을 바꾼다고 해도, 확인 버튼이 이미 onClick={onButtonClick}으로 설정되어 있기 때문에 수정할 때 얻은 아이디 값을 맞게 바꾸기 어려워서 이다.

 

 

App에 State 만들기

 

 

처음 김다정님 책 따라 만들었던 것처럼 readOnly라는 state를 하나 만들어주고 기본값을 read로 만들어준다.

값이 read일 때는 addGoal이 작동하는 GoalForm 컴포넌트가

값이 edit일 때는 editGoal이 작동하는 editGoalForm 컴포넌트가 나타나도록 해보자

 

 

  let [readOnly, readOnlyChange] = useState('read');

 

 

그러려면 목표를 클릭할때 해당 state의 값이 변경되도록 해야 한다.

목표 수정 이벤트핸들러 함수에서 state가 변경될 수 있도록 readOnly와 readOnlyChange 함수를 props로 내려준다.

 

 

<Route exact path="/goals">
<BasicNavBar/>
  <GoalForm addGoal={addGoal} editTmpGoal={editTmpGoal} />
  <Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal}
  editToGoalForm={editToGoalForm} readOnly={readOnly} readOnlyChange={readOnlyChange}  />
</Route>

 

그리고 각각 props로 받아준 다음

 

 

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

 

 

목표 수정 이벤트핸들러 함수에 readOnly가 변경될 수 있도록 해주고 console.log(readOnly)로 잘 바뀌는지 확인한다.

 

 

  //목표 수정 이벤트핸들러 함수
  function editEventHandler(e){
    const { id } = e.target;
    readOnlyChange(readOnly='edit');
    console.log(readOnly)
  }

 

 

 

state가 잘 변경되었음을 확인할 수 있다.

 

 

그럼 이제 조건문을 통해 readOnly state가 edit이면 GoalEditForm 이라는 컴포넌트가 등장하도록 해주자.

 

 

GoalEditForm 컴포넌트 만들기

 

 

아직 GoalEditForm 컴포넌트가 없기 때문에 하나 만들어준다.

GoalEditForm.js라는 파일을 생성해준다.

그리고 GoalForm 컴포넌트를 그대로 가져다 붙여넣어준다.

 

 

import { Button, Grid, Box, TextField } from "@mui/material";
import React, { useState } from "react";


export default function GoalEditForm(props){

    /* props 선언 시작 */
    const TextField_Ref = props.TextField_Ref;
    const addGoal = props.addGoal;

    /* props 선언 끝 */


    /* Hook 선언 시작 */


    let [goalTodo, goalTodoChange] = useState({item : { title : '' }}, props.addGoal);

    /* Hook 선언 끝 */

    /* 함수 선언 시작 */


    function onInputChange(e) {
        const thisGoal = goalTodo.item;
        thisGoal.title = e.target.value;
        goalTodoChange({item : thisGoal})
        console.log(thisGoal)
    }

    function onButtonClick(){
        addGoal(goalTodo.item);
        goalTodoChange({item : {title: ''}});
    }
    
    function enterKeyEventHandler(e){
        if(e.key === 'Enter'){
            onButtonClick();
        }
    
      }

    /* 함수 선언 끝 */


    return(
        <Box style={{ margin : 16, padding: 16, position:'relative' }}>
        <p>수정</p>
            <Grid container>
                <Grid xs={11} md={11} item style={{paddingRight: 12}}>
                    <p className="goalform_title" style={{fontSize: '12px', color: '#aeaeae'}}>제목</p>
                    <TextField fullWidth id="goalform_textfield" variant="standard" onChange={onInputChange} ref={TextField_Ref} /> 
                </Grid>
                <Grid xs={1} md={1} item >
                    <Button fullWidth color="secondary" onClick={onButtonClick} 
                    value={goalTodo.item.title} onKeyPress={enterKeyEventHandler}
                    style={{position:'relative', top: '-85px',  fontSize: '14px', fontWeight: '600', color: '#111'}} >
                        확인
                    </Button>    
                </Grid>
            </Grid>
        </Box>
    )

}

 

 

박스 안의 <p>수정</p> 은 컴포넌트 모양이 같아 눈으로 변화를 확인하기 위해서 넣어보았다. 

 

다시 App.js로 이동하자.

 

 

 

조건문으로 컴포넌트 노출하기

 

 

예전에 php 배웠을 때는 HTML 태그 사이에 스크립트를 넣어서 사용할 수 있는게 엄청 좋아보였는데

리액트도 노드도 HTML 내부에서 스크립트를 사용할 수 있었다.

php만의 장점인 줄 알았는데...

 

 

내가 조건문을 써야 하는 곳은 Route /goals로 구분된 곳이다.

BasicNavBar 까지는 건드리지 않아도 되고 오직 GoalForm 부분만 바뀌면 된다.

리액트에서는 변수 쓰는 것처럼 스크립트를 중간에 넣으려고 할 때도 중괄호 { } 를 이용한다.

 

그리고 if else 문을 사용하기 위해서는 별도로 function을 사용해야 하기 때문에 

삼항 연산자를 사용하면 복잡하지 않게 표현할 수 있다.

 

 

 <Route exact path="/goals">
    <BasicNavBar/>
    {
     readOnly === 'read' ? <GoalForm addGoal={addGoal} /> : <GoalEditForm editGoal={editGoal} />
    }
  <Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal} editToGoalForm={editToGoalForm} readOnly={readOnly} readOnlyChange={readOnlyChange}  />
</Route>

 

 

readOnly가 read 상태, 즉 기본 상태이면 GoalForm으로 addGoal이 작동할 수 있도록 해주고,

readOnly가 read 가 아니면 GoalEditForm으로 연결해준다.

 

 

그리고 클릭해보면 

 

 

 

 

두번째를 클릭했을 때, readOnly가 edit으로 바뀌고 '수정'이라고 적힌 GoalEditForm 컴포넌트가 나타나는 것이 보인다.

 

 

그럼 이제 GoalEditForm일 때 제목 부분에 값이 노출되도록 해보자.

 

 

 

제목에 title 노출되도록 하기

 

 

document.querySelector 를 사용할건데 GoalEditForm으로 재렌더링 되면서 순간적으로 DOM을 찾지 못하는 경우가 있다.

TextFieldControl이라는 함수를 하나 만들고 editToGoalForm에 콜백함수로 넣어준다.

 

 

 

  //목표 GoalForm으로 보내기 함수
  function editToGoalForm(id){
    const thisItems = goal.items; // goal State 원본 카피
    const currentEditItems = thisItems.filter(e => e.id === id)
    TextFieldControl(currentEditItems);
  }

  //TextField value 변경 함수

  function TextFieldControl(currentEditItems) {
    const TextField = document.querySelector("#goaleditform_textfield");
    TextField.value = currentEditItems[0].title;
  }

 

 

그런데 이대로 클릭해도 여전히 value값을 못 잡는다는 에러가 떴는데, readOnly가 edit으로 변경되면서 재렌더링 되는 사이에 다음 함수들이 주르륵 실행되어 버려서 DOM 값을 못 잡는 것이었다.

그래서 다시 Goals 컴포넌트로 가서  editEventHandler를 만져주기로 했다.

async await를 사용해서 readOnlyChange가 실행되고, 다음에 editToGoalForm으로 id 값을 넘겨주는 식으로 순차적으로 실행되도록 했다.

 

 

  //목표 수정 이벤트핸들러 함수
  async function editEventHandler(e){
    const { id } = e.target;
    await readOnlyChange(readOnly='edit');
    console.log(readOnly)
    await editToGoalForm(id)
  }

 

 

그랬더니 

 

 

짠

 

 

 

 

 

 

이제 다음 할 일은 저렇게 title이 변경되면 add처럼 onChange의 변경값을 title 에 담고

id값을 그대로 가지고 와서 기존 goal state에 같은 id 값을 찾아서 title을 변경하게 해주어야 한다!

 

 

점점 길이 보인다..!

화이팅!