[react.js]업데이트하기

※ 이 부분은 앞서 제작한 리스트와는 형태가 조금 다릅니다. 복습 겸 컴포넌트 쪼개볼겸 새로 제작한 코드이니, 참고 바랍니다.

이미 제작한 리스트 update 하기

App.js

import React, { Component } from 'react';
import Form from './components/Form';
import List from './components/List';

class App extends Component {
  state = {
    list: []
  };
  num = 0;

  handleCreate = (input1, input2) => {
    const { list } = this.state;
    this.setState({
      list: list.concat({
        num: this.num++,
        input1: input1,
        input2: input2,
        editing: false
      })
    });
  };
  handleRemove = num => {
    const { list } = this.state;
    const nextList = list.filter(item => item.num !== num);
    this.setState({
      list: nextList
    });
  };
  handleUpdate = (num, data) => {
    const { list } = this.state;
    this.setState({
      list: list.map(item => {
        if (item.num === num) {
          return {
            num,
            ...data
          };
        }
        return item;
      })
    });
  };
  render() {
    const { list } = this.state;
    const { handleCreate, handleRemove, handleUpdate } = this;
    return (
      <div>
        <Form onCreate={handleCreate} />
        <List list={list} onRemove={handleRemove} onUpdate={handleUpdate} />
      </div>
    );
  }
}

export default App;

components/Form.js

import React, { Component } from 'react';

class Form extends Component {
  state = {
    input1: '',
    input2: ''
  };
  refInput = null;

  handleChange = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    const { onCreate } = this.props;
    const { input1, input2 } = this.state;
    onCreate(input1, input2);
    this.setState({
      input1: '',
      input2: ''
    });
    this.refInput.focus();
  };

  render() {
    const { handleChange, handleSubmit } = this;
    const { input1, input2 } = this.state;
    return (
      <div>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            name="input1"
            onChange={handleChange}
            value={input1}
            ref={ref => (this.refInput = ref)}
          />
          <input
            type="text"
            name="input2"
            onChange={handleChange}
            value={input2}
          />
          <button type="submit">Add</button>
          {JSON.stringify(input1 + '/' + input2)}
        </form>
      </div>
    );
  }
}

export default Form;

components/List.js

import React from 'react';
import ListItem from './ListItem';

const List = ({ list, onRemove, onUpdate }) => {
  return (
    <>
      <ul>
        {list.map(item => {
          return (
            <ListItem item={item} onRemove={onRemove} onUpdate={onUpdate} />
            // map을 통해 lists => list 화 시킴
          );
        })}
      </ul>
    </>
  );
};

export default List;

components/ListItem.js

import React, { Component } from 'react';

class ListItem extends Component {
  state = {
    editing: false,
    input1: '',
    input2: ''
  };
  handleChange = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };
  handleToggle = () => {
    const { editing } = this.state;
    const { item } = this.props;
    if (editing) {
    } else {
      this.setState({
        input1: item.input1,
        input2: item.input2
      });
    }
    this.setState({
      editing: !editing
    });
  };
  handleUpdate = () => {
    const { handleToggle } = this;
    const { item, onUpdate } = this.props;
    const { input1, input2 } = this.state;
    onUpdate(item.num, {
      input1: input1,
      input2: input2
    });
    handleToggle();
  };
  render() {
    const { item, onRemove } = this.props;
    const { editing, input1, input2 } = this.state;
    const { handleToggle, handleChange, handleUpdate } = this;
    return (
      <>
        {editing ? (
          <li>
            <input
              type="text"
              name="input1"
              onChange={handleChange}
              value={input1}
            />
            <input
              type="text"
              name="input2"
              onChange={handleChange}
              value={input2}
            />
            <button onClick={handleUpdate}>수정완료</button>
          </li>
        ) : (
          <li key={item.num}>
            {item.input1} / {item.input2}
            <button onClick={handleToggle}>수정</button>
            <button
              onClick={e => {
                //   e.stopPropagation();
                onRemove(item.num);
              }}
            >
              삭제
            </button>
          </li>
        )}
        {JSON.stringify(input1 + '/' + input2)}
      </>
    );
  }
}

export default ListItem;

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

2019/10/11 - [프로그램 강좌] - [react.js]리스트 추가하는 방법

2019/10/12 - [프로그램 강좌] - [react.js]리스트 글 지우는 방법

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

2019/10/14 - [프로그램 강좌] - [react.js]onSubmit, preventDefault 사용방법

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