[react.js]리스트 추가하는 방법

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

이제 입력이 완료되면 input의 모든 내용이 지워지고, 리스트에 내용이 추가되도록 만들어보겠습니다.

버튼이 제일 먼저 필요하겠죠?

 

UI 만들기

components/Board.js

import React, { Component } from 'react';

class Board extends Component {
  state = {
    input1: '',
    input2: ''
  };
  num = 0;

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

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            name="input1"
            onChange={this.handleChange}
            value={this.state.input1}
          />
          <input
            type="text"
            name="input2"
            onChange={this.handleChange}
            value={this.state.input2}
          />
          <button>추가</button> //추가
        </div>
        <div>
          <ul>
            <li>input1 / input2</li> //변경
          </ul>
        </div>
      </div>
    );
  }
}

export default Board;

state에 list 추가

이제 list를 추가해주겠습니다.

state = {
    input1: '',
    input2: '',
    list: [] //추가
  };

제어할 함수 추가

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

이렇게 추가해주면 되겠죠. 이제 이걸 제어할 버튼에 연결해줍니다.

<button onClick={handleCreate}>추가</button>

list도 꾸며줘야겠죠?

<ul>
    {list.map((item, index) => {
        return (
            <li key={index}>
           		{item.input1} / {item.input2}
            </li>
        );
        })}
</ul>

코드 전문이 궁금하시겠죠?

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({
        input1: input1,
        input2: input2
      }),
      input1: '',
      input2: ''
    });
  };

  render() {
    const { handleChange, handleCreate } = 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, index) => {
              return (
                <li key={index}>
                  {item.input1} / {item.input2}
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}

export default Board; 

이제 글 작성까지는 끝났습니다.

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