[react.js]리스트 글 지우는 방법

※ 이 강의는 velopert 님이 하셨던 강의 복습하는 중에 제 스스로 이해한 내용을 담은 내용입니다.

UI 구성

역시나 UI구성에서는 지울 버튼이 필요하겠죠?

components/Board.js

//state 아래
num = 0;

***
		<div>
          <ul>
            {list.map(item => {
              return (
                <li key={item.num}>
                  {item.input1} / {item.input2}
                  <button>X</button> //추가
                </li>
              );
            })}
          </ul>
        </div>

다음은 몇번째 리스트를 지우는지 프로그램이 알게 해줘야겠죠? create 부분을 좀더 수정하겠습니다.

components/Board.js

//추가 명령을 수행할 함수
  handleCreate = () => {
    const { input1, input2, list } = this.state;
    this.setState({
      list: list.concat({
        num: this.num, //추가
        input1: input1,
        input2: input2
      }),
      input1: '',
      input2: ''
    });
    this.num += 1; //추가
  };

이렇게 되면 새로 등록될때 고유 num 값을 갖게 됩니다.

remove 함수 만들기

components/Board.js

import React, { Component } from 'react';

class Board extends Component {
  state = {
    input1: '',
    input2: '',
    list: []
  };
  num = 0; //추가

  //모든 input 제어
  handleChange = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };

  //추가 명령을 수행할 함수
  handleCreate = () => {
    const { input1, input2, list } = this.state;
    this.setState({
      list: list.concat({
        num: this.num, //추가
        input1: input1,
        input2: input2
      }),
      input1: '',
      input2: ''
    });
    this.num += 1; //추가
  };

  //추가: 리스트 삭제할 함수
  handleRemove = num => {
    const { list } = this.state;
    const nextList = list.filter(item => {
      return item.num !== num;
    });
    this.setState({
      list: nextList
    });
  };

  render() {
    const { handleChange, handleCreate, handleRemove } = this;
    const { input1, input2, list } = this.state;
    return (
      <div>
        <div>
          <input
            type="text"
            name="input1"
            onChange={handleChange}
            value={input1}
          />
          <input
            type="text"
            name="input2"
            onChange={handleChange}
            value={input2}
          />
          <button onClick={handleCreate}>추가</button>
        </div>
        <div>
          <ul>
            {list.map(item => {
              return (
                <li key={item.num}>
                  {item.input1} / {item.input2}
                  <button onClick={() => handleRemove(item.num)}>X</button> //추가
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}

export default Board;

잘 작동되나요?

2019/10/10 - [프로그램 강좌] - [react.js]onChange 사용법

2019/10/11 - [프로그램 강좌] - [react.js]등록하기 예제