입력받은 값을 전화번호부 목록에 추가하는 함수를 만들어봅시다.

이번 장에서는 입력받은 값을 전화번호부 목록에 추가하는 handleSubmit 함수를 만들어보겠습니다. 우선 App 컴포넌트를 아래와 같이 수정해주세요.

• src/App.js

import React, { Component } from "react";
import InputBox from "./components/InputBox";
import PhoneList from "./components/PhoneList";
import "./App.css";
import { dummyData, nextId, setNextId } from "./lib/dummyData.js";

class App extends Component {
  state = {
    dummyData,
    name: "",
    phone: ""
  };

  handleInput = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleSubmit = () => {
    const { dummyData, name, phone } = this.state;

    if (name === "" || phone === "") return;

    this.setState({
      dummyData: {
        ...dummyData,
        [nextId]: {
          id: nextId,
          name,
          phone
        }
      },
      name: "",
      phone: ""
    });

    setNextId();
  };

  render() {
    const { handleInput, handleSubmit } = this;
    const { dummyData, name, phone } = this.state;

    return (
      <div className="container">
        <InputBox
          name={name}
          phone={phone}
          onChange={handleInput}
          onSubmit={handleSubmit}
        />
        <PhoneList list={dummyData} />
      </div>
    );
  }
}

export default App;

이처럼 handleSubmit 함수를 만들고 onSubmit이라는 Props를 InputBox에 전달했습니다. 그럼 handleSubmit 함수를 위에서부터 차근차근 해석해봅시다. 우선 state로부터 dummyData, name, phone을 받아와 name 값과 phone 값이 각각 빈값인지 체크해줬습니다. 다음 코드는 입력받은 값을 dummyData에 추가하는 코드입니다. 자세히 살펴보겠습니다.

this.setState({
  dummyData: {
    ...dummyData,
    [nextId]: {
      id: nextId,
      name,
      phone
    }
  },
  name: "",
  phone: ""
});

일단 입력을 받으면 input 태그의 값을 모두 지워주기 위해 name, phone 값을 빈 값으로 설정했습니다. dummyData 부분에서는 Spread 문법으로 기존에 있던 내용을 모두 넣어준 뒤, 새로 입력받은 값을 추가해줬습니다. 다만 여기서 하나 의문이 생길 수 있습니다.

this.state.dummyData[nextId] = { id: nextId, name, phone }

dummyData에 내용을 추가할 건데 이렇게 해도 되지 않겠냐는 생각이 들 수도 있습니다. 하지만 React에서는 위와 같은 방법은 좋은 방법이 아닙니다. 그 이유는 불변성을 지켜야 하기 때문이라는 것이지만 여기서는 자세하게 설명하지 않겠습니다. 간단하게 컴포넌트 리렌더링을 보장받을 수 있고, 성능 개선이 가능하기 때문이라는 이유만 알고 넘어가겠습니다.

handleSubmit의 맨 마지막 코드인 setNextId 함수를 통해 dummyData.js 파일의 nextId 값을 1 더해줬습니다. 그럼 이제 InputBox 컴포넌트를 수정해봅시다.