React로 여러개의 input 추가 삭제, 입력 기능 만들어보자!

이 블로그 내용은 useState가 아닌, this.state로 상태를 변경하게 됩니다.

두 로직 모두 이해하신 분이시라면, 어떤 걸로 하든 충분히 하실 수 있습니다.

 

1. state와 이벤트 핸들러를 가지고 있을 InputContainer.js 만들기

import React, { Component } from "react";
import InputComponent from "../components/InputComponent";

class InputContainer extends Component {
  constructor(props) {
    super();
    this.state = {
      inputItems: [
        {
          id: 0,
          title: "",
          one: "",
          two: ""
        }
      ],
      inputAddId: 1
    };
  }

  // input 추가하기
  AddInput = () => {
    
  };

  // input 삭제하기
  InputDelete = (id) => {
  
  };

  // input 입력 이벤트 핸들러
  onChange = (e, id) => {
    
  };

  // 확인 버튼
  confirm = () => {
   
  };

  // 렌더링 메서드
  render() {
    const { inputItems, inputAddId } = this.state;

    return (
    	<div>
        	<div>hello</div>
        </div>
    );
  }
}

export default InputContainer;

 

2. App.js에 InputContainer.js 연결시키기

import InputContainer from "InputContainer.js가 있는 위치";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <InputContainer />
    </div>
  );
}

 

3. AddInput 메서드에 로직 추가해서 + 버튼을 누를 때 마다 input이 추가되게 해보자.

// input 추가하기
  AddInput = () => {
    const { inputItems, inputAddId } = this.state;

    const input = {
      id: inputAddId,
      title: "",
      one: "",
      two: ""
    };

    this.setState({
      inputItems: inputItems.concat({
        ...input
      }),
      inputAddId: inputAddId + 1
    });
  };

- AddInput 메서드에 기능을 추가하자. concat 함수를 이용해서, input 태그에 들어갈 속성의 값을 저장하는 로직을 만들자.

inputAddId는, input 추가가 될 때 마다 1씩 증가하게 되며, const input이란, object 형 변수를 만들어서

각 속성에 들어갈 값을 추가해서, inputItems에 넣도록 하자.

 

4. InputComponent.js 파일을 만들자.

import React from "react";

const InputComponent = ({inputItems,addInput,InputDelete,onChange,confirm}) => {
  return (
    <div>
      {inputItems.map((item, index) => {
        return (
          <div>
            <div>{item.id}</div>
            <input
              name="one"
              type="text"
              defaultValue={item.one}
            />
            <input
              name="two"
              type="text"
              defaultValue={item.two}
            />
            {index === 0 && inputItems.length < 10 && (
              <button onClick={() => addInput()}> + </button>
            )}
          </div>
        );
      })}
    </div>
  );
};

export default InputComponent;

- InputComponent.js 파일을 만들고, 위와 같이 만들어주세요. 최대 10개의 input까지만 만들수 있도록 10개 input이 있다면 + 버튼을 누를 수 없도록 했습니다.

 

5. render 메서드에 InputComponent 연결하기

// 렌더링 메서드
  render() {
    const { inputItems } = this.state;

    return (
      <div>
        <InputComponent
          inputItems={inputItems}
          addInput={this.AddInput}
        />
      </div>
    );
  }

6. input 추가가 잘 되는 지 확인해보자.

- 나는 잘 됐다. 만약 안된다면, 밑에 전체 코드를 작성할 테니 확인을 한 번 해보고 틀린 것이 없는 지 확인하기를 바란다.

0~9번까지의 번호가 붙은 input 태그가 잘 출력이 될 것이다.

 

7. 이제 input을 삭제하자.

// input 삭제하기
  InputDelete = (id) => {
    const { inputItems } = this.state;

    this.setState(
      {
        inputItems: []
      },
      () => {
        this.setState({
          inputItems: inputItems.filter((item) => item.id !== id)
        });
      }
    );
  };
  
  // 렌더링 메서드
  render() {
    const { inputItems } = this.state;

    return (
      <div>
        <InputComponent
          inputItems={inputItems}
          addInput={this.AddInput}
          InputDelete={this.InputDelete}
        />
      </div>
    );
  }

- this.setState에, inputItems.filter로 같이 아이디의 값만 제외시키도록 했다. 그럼 Component에도 마이너스 버튼을 추가해주도록 하자.

 

8. InputComponent.js에 마이너스 버튼을 추가하자.

import React from "react";

const InputComponent = ({inputItems,addInput,InputDelete}) => {
  return (
    <div>
      {inputItems.map((item, index) => {
        return (
          <div>
            <div>{item.id}</div>
            <input
              name="one"
              type="text"
              defaultValue={item.one}
            />
            <input
              name="two"
              type="text"
              defaultValue={item.two}
            />
            {index === 0 && inputItems.length < 10 && (
              <button onClick={() => addInput()}> + </button>
            )}
            {index > 0 && inputItems[index - 1] ? (
              <button onClick={() => InputDelete(item.id)}> - </button>
            ) : (
              ""
            )}
          </div>
        );
      })}
    </div>
  );
};

export default InputComponent;

- input을 2개 이상 추가하는 순간 마이너스 버튼이 생길 것이고, 마이너스 버튼을 클릭하면 input이 하나씩 없어질 것이다.

 

9. 입력 이벤트 핸들러 만들기

// input 입력 이벤트 핸들러
  onChange = (e, id) => {
    const { inputItems } = this.state;

    const data = {
      [e.target.name]: e.target.value
    };

    this.setState({
      inputItems: inputItems.map((item) =>
        item.id === id ? { ...item, ...data } : item
      )
    });
  };

  // 확인 버튼
  confirm = () => {
    const { inputItems } = this.state;

    console.log(inputItems);
  };
  
  // 렌더링 메서드
  render() {
    const { inputItems } = this.state;

    return (
      <div>
        <InputComponent
          inputItems={inputItems}
          addInput={this.AddInput}
          InputDelete={this.InputDelete}
          onChange={this.onChange}
          confirm={this.confirm}
        />
      </div>
    );
  }

- 입력 이벤트 핸들러도 만들었고, confirm 버튼을 클릭하면

내가 입력한 값들의 object 데이터가 출력되게 할 수 있는 핸들러 또한 만들었다.

 

그리고 render 메서드에, InputComponent로 해당 이벤트 핸들러를 넘겨서 사용해보도록 하자.

이젠 InputComponent.js에 핸들러들을 연결해주면 된다.

 

10. InputComponent.js에 이벤트 핸들러 연결하기

import React from "react";

const InputComponent = ({inputItems,addInput,InputDelete,onChange,confirm}) => {
  return (
    <div>
      {inputItems.map((item, index) => {
        return (
          <div>
            <div>{item.id}</div>
            <input
              name="one"
              type="text"
              defaultValue={item.one}
              onChange={(e) => onChange(e, item.id)}
            />
            <input
              name="two"
              type="text"
              defaultValue={item.two}
              onChange={(e) => onChange(e, item.id)}
            />
            {index === 0 && inputItems.length < 10 && (
              <button onClick={() => addInput()}> + </button>
            )}
            {index > 0 && inputItems[index - 1] ? (
              <button onClick={() => InputDelete(item.id)}> - </button>
            ) : (
              ""
            )}
          </div>
        );
      })}
      <button onClick={() => confirm()}> confirm </button>
    </div>
  );
};

export default InputComponent;

- 자 이제 개발자 도구를 열어서 input 추가도 해보고, 값도 넣어보도록 하자. 아주 잘 되는 것을 확인할 수 있을 것이다.

 

회사 내부 프로젝트를 개발하다가 내 일을 다 끝내놓고, 다른 개발자의 일을 대신하다가 나중에 이런 일이 발생할 때 까먹을 것 같아서 쓰는 글이다.

 

해당 로직은 알아서 이해하기를 바라며 오늘도 해결 완료!