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

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

---

 

이제는 + 모양 버튼을 누르면 리스트가 추가되어야 한다. 이것도 김다정님의 책을 참고해서 일부분 변형해서 구현해보려고 한다.

 

 

 

지금 문제는 원래 todomate의 추가 버튼이 상단 바 오른쪽에 있어서 나도 그렇게 만들어야 한다면, route 별로 BasicNavBar가 다르게 보일 수 있도록 해야하는건지, 아니면 그냥 화면에 구현하고 위치만 상단으로 옮겨놔도 되는지 이다. 

고민하다가 일단 버튼을 만들어서 상단에 올려놓고, 나중에 조건문을 쓰던 뭘 하던 해야겠다고 생각...

 

 

 

1. Todo를 추가하는 컴포넌트 만들기

 

책에서는 todo 추가를 위한 UI와 백엔드를 콜할 함수를 작성하는데 이 함수는 가짜(Mock) 함수고, todo를 추가할 이벤트 핸들러 함수와 함수를 UI에 연결하는 것을 하나의 챕터로 삼았다.

같은 방식으로 진행해보자.

 

우선 UI를 위해 GoalForm (책에서는 AddTodo) 이라는 컴포넌트를 만들어준다.별도의 파일로 생성한다.

useState를 이용해 사용자의 입력값을 받을 객체를 미리 생성해준다.

그리고 아래 MUI를 이용해 UI를 디자인 하면 되는데, 여기서 만드는 + 버튼은 '입력'을 해주는 버튼이기 때문에 우리 화면에서는 '확인' 이라는 텍스트 버튼으로 대체한다.

 

 

 

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


export default function GoalForm(){

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



    return(
        <Box style={{ margin : 16, padding: 16, position:'relative' }}>
            <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" /> 
                </Grid>
                <Grid xs={1} md={1} item >
                    <Button fullWidth color="secondary" style={{position:'relative', 
                    top: '-85px',  fontSize: '14px', fontWeight: '600', color: '#111'}} >
                        확인
                    </Button>    
                </Grid>
            </Grid>
        </Box>
    )

}

 

 

이렇게 만든 GoalForm 컴포넌트를 Goals 컴포넌트에 추가해준다. (나중에 상단 + 버튼을 누르면 해당 컴포넌트가 위에 레이어처럼 뜨도록 만들어보자)

 

 

 

 

2. Add 핸들러 추가

 

리액트로 뭔가를 만들때는 이벤트를 '감지'하고 그것을 전송하는 것이 중요하다.

그래서 키보드로 TextField에 뭔가를 입력하면 실행할 이벤트 핸들러와, 확인 버튼을 누를 때 발생할 이벤트 핸들러가 필요하다. 책에서는 이 이벤트 핸들러들 함수의 이름을 제공해주는데 아래와 같다.

 

- onInputChange : 사용자가 TextField에 문자열을 추가하면 해당 문자열을 자바스크립트 객체로 저장한다.

- onButtonClick : 사용자가 확인(책에서는 +)버튼을 누를 때 실행되고, onInputChange에서 저장한 문자열을 리스트에 추가한다.

- enterKeyEventHandler : onButtonClick과 같은 기능이지만 엔터나 리턴을 눌렀을 때도 실행되도록 하는 함수다.

 

 

 

초반에 useState로 만든 goalTodo는 사용자의 입력값을 임시로 저장하는 곳이다. TextField에서 값이 입력되면 onChange를 props로 쓸 수 있는데, 이 onChange는 사용자가 키보드를 누를 때 마다 실행된다.

따라서 onChange에 핸들러인 onInputChange를 연결하면 사용자 입력 정보를 객체에 저장할 수 있다.

이벤트의 값인 e.target.value를 title의 '' 에 대체해주는 함수를 적어보자.

변수 thisGoal 은 state인 goalTodo의 item이 할당된다. state는 바로 변경하는 것이 아니라, 원본 값은 그대로 두고 그것을 카피해서 변수를 하나 할당해야 한다.

그리고 thisGoal의 title은 TextField의 값인 e.target.value 으로 바꿔준다. 

이렇게 하면 원본은 그대로 살아있고, thisGoal이라는 변수는 {{ title: e.target.value }} 가 된다.

state를 이것으로 바꿔치기 해야 하는데, useState이기 때문에 goalTodoChange라는 미리 생성된 useState의 변경함수를 이용한다.

 

 

 

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


export default function GoalForm(){

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

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

    return(
        <Box style={{ margin : 16, padding: 16, position:'relative' }}>
            <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} /> 
                </Grid>
                <Grid xs={1} md={1} item >
                    <Button fullWidth color="secondary" style={{position:'relative',
                    top: '-85px',  fontSize: '14px', fontWeight: '600', color: '#111'}} >
                        확인
                    </Button>    
                </Grid>
            </Grid>
        </Box>
    )

}

 

 

 

3. Add 함수 작성

 

 

이제 확인을 누르면 작성한 목표가 추가되어야 한다. 

이 때는 확인 버튼을 누르게 되면 onButtonClick이나 enterKeyEventHandler이 실행되게 한다. 함수가 실행되면 App.js에 만들어둔 goal State에 내용이 추가되도록 해준다.

여기서 문제는 어제 확인한 바와 같이 props는 아래에서 위로 못 올라간다. 그렇기 때문에 업데이트 할 State가 있는 App.js에 리스트를 추가하는 함수를 작성해야 한다. 

그리고 그 함수를 props로 GoalForm 컴포넌트에 넘겨 사용해야 한다.

 

 

App.js에서 함수를 작성해본다.

아까 onInputChange와 같다. 원본 state인 goal.items을 thisItems 라는 변수에 카피한다. (원래 items라는 이름을 안 붙였는데, 책과 내용을 맞추기 위해 업데이트 했음!)

그리고 item의 id를 만들어주고, done을 false로 만들어준다. 이것을 아까 카피한 thisItems라는 변수에 push로 밀어넣어주고 이것을 goalChange라는 변경함수를 이용해 원본 state를 바꿔준다.

 

 

 

  // 목표goals 페이지 goal 아이템
  let [goal, goalChange] = useState(
     { items: [{
            id : 0,
            title: '목표 만들기',
            done: true
          },
          {
            id: 1,
            title: '목표 만들기 2',
            done: false
          },
          {
            id: 2,
            title: '목표 만들기 3',
            done: false
          }]
    
    }
  )

  function add(item){

    const thisItems = goal.items; // goal State 원본 카피
    item.id = 'ID-' + thisItems.length; //key를 위한 id 추가
    item.done = false; // done false로 초기화
    thisItems.push(item) // 카피한 goal 리스트에 아이템 추가
    goalChange({items: thisItems}); //goalChange를 이용해 state 변경
    console.log('items :', goal.items)

  }

 

 

 

그리고 이 add 함수를 props로 보낸다. 

 

 

 

import React, { useState } from "react";
import "../stylesheets/App.css";
import { Button  } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { Switch, Route, useHistory } from "react-router-dom";
import Signin from "./Signin";
import Join from "./Join";
import BasicNavBar from "./BasicNavBar";
import Goals from "./Goals";
import Main from "./Main";


function App() {
  let history = useHistory();

  // 목표goals 페이지 goal 아이템
  let [goal, goalChange] = useState(
     { items: [{
            id : 0,
            title: '목표 만들기',
            done: true
          },
          {
            id: 1,
            title: '목표 만들기 2',
            done: false
          },
          {
            id: 2,
            title: '목표 만들기 3',
            done: false
          }]
    
    }
  )

  function add(item){

    const thisItems = goal.items; // goal State 원본 카피
    item.id = 'ID-' + thisItems.length; //key를 위한 id 추가
    item.done = false; // done false로 초기화
    thisItems.push(item) // 카피한 goal 리스트에 아이템 추가
    goalChange({items: thisItems}); //goalChange를 이용해 state 변경
    console.log('items :', goal.items)

  }


  return (
    <ThemeProvider theme={theme}>
      <Switch>
        <Route exact path="/">
          <div className="App">
            <div className="header">
              <img className="main_img" src="images/todomate.jpg" />
              <h1>todo mate</h1>
              <h3>할 일을 작성, 계획, 관리하세요.</h3>
            </div>
            <div className="start_btn">
              <Button 
                className="join_btn" 
                color="btn"
                variant="contained" 
                sx={{ boxShadow: 'none'}}
                onClick={() => {
                  history.push("/join");
                }}
              >
                가입하기
              </Button>
              <Button
                className="signin_btn"
                color="btn"
                variant="contained"
                sx={{ boxShadow: 'none'}}
                onClick={() => {
                  history.push("/signin");
                }}
              >
                로그인
              </Button>
            </div>
          </div>
        </Route>
        <Route exact path="/main">
          <Main/>
        </Route>
        <Route exact path="/join">
        <BasicNavBar/>
          <Join />
        </Route>
        <Route exact path="/signin">
        <BasicNavBar/>
          <Signin />
        </Route>
        <Route exact path="/goals">
        <BasicNavBar/>
          <Goals goal={goal.items} add={add} key={goal.items.id} />
        </Route>
        </Switch>
    </ThemeProvider>
  );
}

export default App;

 

 

 

여기서 문제는 나는 App.js -> Goals.js -> GoalForm.js 로 넣어줘야 해서 한 번 더 props로 전달한다.

 

 

import React from "react";
import { Checkbox, InputBase, ListItem, ListItemText } from "@mui/material";
import GoalForm from "./GoalForm";

export default function Goals(props) {
  console.log(props.goal);
  let goalItems = props.goal;
  let add = props.add;
  return (
    <>
    <GoalForm add={add} />

        {
        goalItems.map((item, idx) => {
        return (
                <ListItem className="goals-wrap">
                    <Checkbox checked={item.done} />
                    <ListItemText>
                    <InputBase
                        inputProps={{ "aria-label": "naked" }}
                        type="text"
                        id={item.id}
                        name={item.id}
                        value={item.title}
                        multiline={true}
                        fullWidth={true}
                    />
                    </ListItemText>
                </ListItem>
                );
            })
        }
    </>
  );
}

 

 

 

그리고 이 add 함수를 onButtonClick 의 이벤트 핸들러 함수로 사용한다. 

 

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


export default function GoalForm(props){

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

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

    function onButtonClick(){
        props.add(goalTodo.item);
        goalTodoChange({item : {title: ''}});
    }

    return(
        <Box style={{ margin : 16, padding: 16, position:'relative' }}>
            <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} /> 
                </Grid>
                <Grid xs={1} md={1} item >
                    <Button fullWidth color="secondary" onClick={onButtonClick}
                    style={{position:'relative', top: '-85px',  
                    fontSize: '14px', fontWeight: '600', color: '#111'}} >
                        확인
                    </Button>    
                </Grid>
            </Grid>
        </Box>
    )

}

 

우왕 대박 성공했다 ㅠㅠ

 

 

 

 

그럼 똑같이 엔터키로 추가할 수 있도록 enterKeyEventHandler 함수를 추가한다. 기능은 add 함수와 같기 때문에 key입력만 처리해주면 된다.

 

 

GoalForm.js 의 onButtonClick 아래에 추가해준다. 

 

function enterKeyEventHandler(e){
  if(e.key === 'Enter'){
	  onButtonClick();
  }
}

 

이 enterKeyEventHandler 함수는 TextField의 onKeyPress 이벤트에 바인딩해준다.

 

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


export default function GoalForm(props){

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

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

    function onButtonClick(){
        props.add(goalTodo.item);
        goalTodoChange({item : {title: ''}});
    }

    
    function enterKeyEventHandler(e){
        if(e.key === 'Enter'){
            onButtonClick();
        }
    
      }



    return(
        <Box style={{ margin : 16, padding: 16, position:'relative' }}>
            <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} /> 
                </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>
    )

}

 

 

 

다 정상적으로 한 듯 싶은데 왜인지 엔터로는 입력이 안되고 있다.

어쨌든 출력을 시키고 있으니 !! 오늘은 여기까지 ㅠㅠ