[React] state 를 이용하여 데이터 추가,삭제,변경

 

 

TodoList를 구현중이다. 

이번 포스팅에서는 유저의 인터렉션을 통해 todoData 값을 변경시키고, UI를 갱신하는 작업을 할 것이다. 컴포넌트 안에서 데이터를 관리하기 위해 state를 사용한다. 

 

App.js

import React, { Component } from "react";
import "./App.css";

export default class App extends Component {
  btnStyle = {
    color: "#fff",
    border: "none",
    padding: "5px 9px",
    borderRadius: "50%",
    cursor: "pointer",
    float: "right",
  };

  getStyle = (completed) => {
    return {
      padding: "10px",
      borderBottom: "1px #ccc dotted",
      textDecoration: completed ? "line-through" : "none",
    };
  };

  state = {
    todoData: [
      {
        id: "1",
        title: "study",
        completed: false,
      },
      {
        id: "2",
        title: "clean room",
        completed: true,
      },
    ],
    inputValue: "",
  };

  handleRemove = (id) => {
    //let newTodoData = this.todoData.filter(data=> data.id !== id);
    let newTodoData = this.state.todoData.filter((data) => data.id !== id);
    this.setState({ todoData: newTodoData });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    let newTodo = {
      id: Date.now(),
      title: this.state.inputValue,
      completed: false,
    };
    this.state.todoData.push(newTodo);
    this.setState({
      todoDate: [...this.state.todoData, newTodo],
      inputValue: "",
    });
  };

  handleComplete = (id) => {
    //console.log(e);
    let newTodo = this.state.todoData.map((data) => {
      if (data.id === id) {
        data.completed = !data.completed;
      }
      return data;
    });

    this.setState({ todoDate: newTodo });
  };

  render() {
    return (
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할일 목록</h1>
          </div>
          {this.state.todoData.map((data) => (
            <div style={this.getStyle(data.completed)} key={data.id}>
              <input
                type="checkbox"
                defaultChecked={data.completed}
                onChange={() => {
                  this.handleComplete(data.id);
                }}
              />{" "}
              {data.title}
              <button
                style={this.btnStyle}
                onClick={() => {
                  this.handleRemove(data.id);
                }}
              >
                x
              </button>
            </div>
          ))}

          <form style={{ display: "flex" }} onSubmit={this.handleSubmit}>
            <input
              type="text"
              name="value"
              style={{ flex: "10", padding: "5px" }}
              placeholder="해야할 일을 입력하세요."
              value={this.state.inputValue}
              onChange={(event) => {
                this.setState({ inputValue: event.target.value });
              }}
            />
            <input
              type="submit"
              value="입력"
              className="btn"
              style={{ flex: "1" }}
            />
          </form>
        </div>
      </div>
    );
  }
}

1. state 데이터 선언하기

 state = {
    todoData: [
      {
        id: "1",
        title: "study",
        completed: false,
      },
      {
        id: "2",
        title: "clean room",
        completed: true,
      },
    ],
    inputValue: "",
  };

데이터는 위처럼 state 안에 원하는 데이터를 선언한다. 

 

state 값 변경은 아래처럼 this.setState()

//state의 todoData 값을 newTodoData로 변경한다.
this.setState({ todoData: newTodoData }); 

//state의 todoData 에 newTodo 아이템을 추가하고, inputValue 를 "" 로 변경한다
this.setState({
      todoDate: [...this.state.todoData, newTodo],
      inputValue: "",
});

 

 

1. Input Field 에 값 작성하기

<input
	...
	onChange={(event) => {
		this.setState({ inputValue: event.target.value });
	}}
 />

 

할일을 입력하는 input 란에 유저가 값을 입력하면 onChange가 호출되며,  this.SetState를 통해 inputValue값을 변경해준다.

 

2. 확인버튼을 눌러 Todo 추가하기

handleSubmit = (event) => {
    event.preventDefault(); //페이지가 리로드되는것을 막음
    let newTodo = {
      id: Date.now(),
      title: this.state.inputValue,
      completed: false,
    };
    this.state.todoData.push(newTodo);
    this.setState({
      todoDate: [...this.state.todoData, newTodo],
      inputValue: "",
    });
  };

 

inputValue값을 가져와 새로운 newTodo 객체를 생성한다. id는 고유해야하므로 Date.now()값을 사용한다. 

todoData에 push해주고, setState를 통해 newTodo 값을 추가해준다.

 

3. 완료됨으로 표시하기 , completed 변수 변경

handleComplete = (id) => {
    //console.log(e);
    let newTodo = this.state.todoData.map((data) => {
      if (data.id === id) {
        data.completed = !data.completed;
      }
      return data;
    });

    this.setState({ todoDate: newTodo });
  };

 

map()함수를 통해 처음부터 todoData를 검색하면서 id가 동일할 경우 completed 값을 변경한다. 변경된 값을 newTodo에 넣고, setState를 통해 변경된 newTodo로 갱신해준다.

 

4. 데이터 삭제하기. 

 handleRemove = (id) => {
    //let newTodoData = this.todoData.filter(data=> data.id !== id);
    let newTodoData = this.state.todoData.filter((data) => data.id !== id);
    this.setState({ todoData: newTodoData });
  };

 

filter함수를 통해 data의 id값이 인자로받은 id와 다른 객체들만 필터링한다. 필터링 된 결과는 newTodoData 로 반환되며, setState를 통해 변경된 newTodoData로 갱신해준다.