배열에 항목 추가

추가

UserList 컴포넌트에서 관리하던 users 배열을 App.js으로 옮겨 관리하고 props로 자식 컴포넌트에 내려준다. 또 CreateUser 컴포넌트를 생성해준다.
user를 추가할때 key로 사용할 고유한 값을 계속 추가해줘야하기 때문에 useRef를 이용해 컴포넌트 안의 변수를 생성해준다.

import React, { useState, useRef } from "react";
import UserList from "./UserList";
import CreateUser from "./CreateUser";

export default function App() {
  const [inputs, setInputs] = useState({
    username: "",
    age: ""
  });
  const { username, age } = inputs;

  const [users, setUsers] = useState([
    {
      id: 1,
      username: "Kim",
      age: 20
    },
    {
      id: 2,
      username: "Lee",
      age: "30"
    },
    {
      id: 3,
      username: "Choi",
      age: "40"
    }
  ]);

  const nextId = useRef(4); // 컴포넌트 안에서 변수사용을 위한 ref.

  const onInputChange = e => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onCreate = () => {
    //user 생성 기능 추가할 곳
    //createUser
    
    setInputs({
      username: "",
      age: ""
    }); //inputs reset.
    
    nextId.current += 1; //새로운 key값 생성
  };

  return (
    <div>
      <CreateUser
        username={username}
        age={age}
        onChange={onInputChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </div>
  );
}

//CreateUser.jsx
import React from "react";
//App.js 에서 props로 받은 username, age, oncreate, onChange 이용해 컴포넌트 생성
const CreateUser = ({ username, age, onCreate, onChange }) => {
  return (
    <>
      <input onChange={onChange} value={username} name="username" type="text" />
      <input onChange={onChange} value={age} name="age" type="number" />
      <button onClick={onCreate}>추가</button>
    </>
  );
};

export default CreateUser;

이제 onCreate 기능을 추가해면

import React, { useState, useRef } from "react";
import UserList from "./UserList";
import CreateUser from "./CreateUser";

export default function App() {
  const [inputs, setInputs] = useState({
    username: "",
    age: ""
  });
  const { username, age } = inputs;

  const [users, setUsers] = useState([
    {
      id: 1,
      username: "Kim",
      age: 20
    },
    {
      id: 2,
      username: "Lee",
      age: "30"
    },
    {
      id: 3,
      username: "Choi",
      age: "40"
    }
  ]);

  const nextId = useRef(4);

  const onInputChange = e => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onCreate = () => {
    const user = {
      username,
      age,
      id: nextId.current
    }; // 생성한 user 정보 저장
    setUsers([...users, user]); //users 배열의 불변성 유지하며 생성한 user 추가
    setInputs({
      username: "",
      age: ""
    });
    nextId.current += 1;
  };

  return (
    <div>
      <CreateUser
        username={username}
        age={age}
        onChange={onInputChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </div>
  );
}