[React] CRUD - Create, Delete

박이레·2022년 11월 7일

목록 보기

5/12

　美. 아름다움은 주관의 영역입니다. 그 주관도 흔들릴 때가 많습니다. 시간이 지나면 아름다움의 기준도 변합니다. 어제 세상에서 가장 아름다웠던 연인이 오늘 그렇지 않은 경우도 있습니다. 시간 앞에 기준이 흔들리고 빛이 바랩니다. 물론 아닌 경우도 있지만요.

철저한 주관의 영역인 아름다움에도 객관적 영역의 아름다움이 있습니다. 유클리드 기하학의 평행선, 미학에서의 황금비, 논리학에서의 공리가 그렇습니다. 학문적으로나 논리적으로 아름답습니다. 배우는 기쁨을 더해줍니다.

자바와 스프링으로 CRUD를 하던 제게, 자바스크립트와 리액트의 CRUD는 아름다웠습니다. 첫눈에 반했습니다. 리액트에 애정을 더해줬습니다. Create(쓰기)와 Delete(삭제), Read(읽기), Update(수정)를 나누어 정리합니다.

Create

App Component

Create
① App Component에서는 items를 useState를 사용해 상태를 관리합니다.
② addItem 함수를 정의합니다. 매개변수 item의 값은 해당 함수를 사용하는 AddTodo에서 받습니다.
③ todoItems는 items가 존재하는지 확인하고, 존재한다면 map 함수를 통해 하나씩 나타냅니다.
이 함수는 아래 return에서 사용합니다.
Delete
① deleteItem 함수를 정의합니다. 매개변수 item의 값은 해당 함수를 사용하는 Todo에서 받습니다.
② newItems는 filter 함수를 통해 삭제한 아이템을 제외한 아이템을 다시 배열에 저장합니다.

import './App.css';
import Todo from './Todo';
import React, { useState } from 'react';
import { Container, List, Paper } from '@mui/material';
import AddTodo from './AddTodo';

function App() {
  const [items, setItems] = useState([]);

  const addItem = (item) => {
    item.id = "ID-" + items.length;
    item.done = false;
    // 업데이트는 반드시 setItems로 하고 새 배열을 만들어야 한다.
    setItems([...items, item]);
    console.log("items : ", items);
  }

  const deleteItem = (item) => {
    // 삭제할 아이템을 찾는다.
    const newItems = items.filter(e => e.id !== item.id);
    // 삭제할 아이템을 제외한 아이템을 다시 배열에 저장한다.
    setItems([...newItems])
  }

  let todoItems = items.length > 0 && (
    <Paper style={{ margin: 16 }}>
      <List>
        {items.map((item) => (
          <Todo item={item} key={item.id} />
        ))}
      </List>
    </Paper>
  );
  return <div className="App">
    <Container maxWidth="md">
      <AddTodo addItem={addItem} />
      <div className="TodoList">{todoItems}</div>
    </Container>
  </div>
}

export default App;

AddTodo Component

① AddTodo Component에서는 item을 useState를 사용해 상태를 관리합니다. item은 onInputChange에서 정의한대로 사용자의 입력값이 들어가게 됩니다.
② onButtonClick 함수는 클릭됐을 때, addItem 함수를 사용합니다. addItem 함수는 상위 컴포넌트인 App 함수에 정의되어 있습니다. 해당 함수는 const addItem = props.addItem;으로 불러와서 사용하고 있습니다.
③ enterKeyEventHandler 함수는 e.key가 'Enter'인 경우 onButtonClick 함수를 호출합니다. 즉, 사용자가 Enter Key를 누르는 것과 마우스로 + 버튼을 누르는 것의 결과가 동일하게 됩니다.

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

const AddTodo = (props) => {
  const [item, setItem] = useState({ title: ""});
  const addItem = props.addItem;
  
  const onButtonClick = () => {
    addItem(item);
    setItem({ title: ""});
  }
  
  const onInputChange = (e) => {
    setItem({title: e.target.value});
  };
  
  const enterKeyEventHandler = (e) => {
    if (e.key === 'Enter') {
      onButtonClick();
    }
  };
  
  return (
    <Grid container style={{ marginTop: 20}}>
    	<Grid xs={11} md={11} item style={{ paddingRight: 16}}>
          <TextField placeholder="Add Todo here" fullWidth 
          onChange={onInputChange} 
		  onKeyPress={enterKeyEventHandler}
		  value={item.title} />
        </Grid>
		<Grid xs={1} md={1} item>
          <Button fullWidth style={{ height: '100%' }} color="secondary" variant="outlined" onClick={onButtonClick}>
            +
          </Button>
		</Grid>
	</Grid>
);
}

export default AddTodo;

Delete

Todo Component

① deleteItem에서 사용되는 props.deleteItem 함수는 App Component에서 불러옵니다.

import React, { useState } from 'react';
import { 
  ListItem, 
  ListItemText, 
  InputBase, 
  Checkbox, 
  ListItemSecondaryAction,
  IconButton,
   } from '@mui/material';
import DeleteOutlined from '@mui/icons-material/DeleteOutlined';

const Todo = (props) => {
  const [item, setItem] = useState(props.item);

  const deleteItem = props.deleteItem;

  // deleteEventHandler 작성
  const deleteEventHandler = () => {
    deleteItem(item);
  }

  return (
    <ListItem>
      <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>
      <ListItemSecondaryAction>
        <IconButton aria-label="Delete Todo" onClick={deleteEventHandler}>
          <DeleteOutlined />
        </IconButton>
      </ListItemSecondaryAction>
    </ListItem>
  )
}

export default Todo;