App 컴포넌트에 있는 여러 메소드를 수정해봅시다.

8-1장에서는 우선 handleSubmit, handleRemove 함수 내부 코드를 다 지워놓았고, handleInput 함수는 아예 삭제했었습니다. 이번 장에서는 handleSubmit 함수와 handleRemove 함수를 수정해보겠습니다. 먼저 handleSubmit 함수 먼저 만들어볼 텐데, App 컴포넌트를 아래와 같이 수정해주세요.

• src/App.js

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

const App = () => {
  const [data, setData] = useState(dummyData);
  const [name, setName, onChangeName] = useInput("");
  const [phone, setPhone, onChangePhone] = useInput("");

  const handleSubmit = () => {
    if (name === "" || phone === "") return;

    setData({
      ...data,
      [nextId]: {
        id: String(nextId),
        name,
        phone
      }
    });
    setName("");
    setPhone("");

    setNextId();
  };

  const handleRemove = id => {

  };

  return (
    <div className="container">
      <InputBox
        name={name}
        phone={phone}
        onChangeName={onChangeName}
        onChangePhone={onChangePhone}
        onSubmit={handleSubmit}
      />
      <PhoneList list={data} deleteItem={handleRemove} />
    </div>
  );
}

export default App;

먼저, name 값과 phone 값 모두 입력되어있지 않은 상황에서는 전화번호부 목록에 추가되지 않게 한 부분은 동일합니다. 저희가 주목해야 할 부분은 그다음 코드인데요, 먼저 setData 함수 코드 먼저 살펴봅시다. 기존의 코드는 아래와 같이 되어있었습니다.

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

setData 함수는 위의 setState 함수 중에서 dummyData를 설정하는 부분만 따로 가져온 것입니다. 저 Hooks에는 dummyData와 관련된 데이터가 들어있기 때문입니다. 따라서 setData 함수만으로는 전화번호부 목록이 추가된 후에 input 값을 빈값으로 바꿔주지 못합니다. 그래서 setName, setPhone 함수로 빈 값을 설정해줘야 합니다.

다음으로 handleRemove 함수를 수정해봅시다. 아래와 같이 수정해주세요.

• src/App.js

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

const App = () => {
  const [data, setData] = useState(dummyData);
  const [name, setName, onChangeName] = useInput("");
  const [phone, setPhone, onChangePhone] = useInput("");

  const handleSubmit = () => {
    if (name === "" || phone === "") return;

    setData({
      ...data,
      [nextId]: {
        id: String(nextId),
        name,
        phone
      }
    });
    setName("");
    setPhone("");

    setNextId();
  };

  const handleRemove = id => {
    const { [id]: _, ...dummyData } = data;

    setData(dummyData);
  };

  return (
    <div className="container">
      <InputBox
        name={name}
        phone={phone}
        onChangeName={onChangeName}
        onChangePhone={onChangePhone}
        onSubmit={handleSubmit}
      />
      <PhoneList list={data} deleteItem={handleRemove} />
    </div>
  );
}

export default App;

이전의 코드와 크게 다르지 않습니다. dummyData가 들어있는 data 변수에서 특정 id 값을 가진 아이템만 빼고, 나머지는 dummyData 객체에 넣어줬습니다. 그리고 setData 함수를 통해 값을 변경해주었습니다.