React - 배열에 항목 추가하기

1. CreateUser.js 생성

import React from 'react';

function CreateUser( { username, email, onChange, onCreate } ){
  return (
    <div>
      <input
      name="username"
      placeholder="계정명"
      onChange={onChange}
      value={username}"/>
      <input
        name="email"
        placeholder="이메일"
        onChange={onChange}
        value={email}"/>
      <button onClick={onCreate}>등록</button>
    </div>
  );
}

export default CreateUser;

 

- App.js -

코드 추가

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

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const {username, email} = inputs;
  const onChange = e => {
    const {name, value} = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

  // 이 배열은 컴포넌트의 상태로서 관리가 되지 않고 있음
  // => useStart로 바꿔주면 된다.
  // const users = [
  // 아래와 같이 바꿔주어야 users를 아래 JSX코드에서 사용할 수 있음
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'starters',
      email: 'public.starters@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@gmail.com'
    },
    {
      id: 3,
      username: 'jajajojo',
      email: 'jajajojo@gmail.com'
    }
  ]);

  const nextId = useRef(4);

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email,
    };
    // push, slice 등은 사용하면 안됨
    // setUsers([...users, user]);
    setUsers(users.concat(user)); // concat은 기존 배열을 해치지않고 합칠 수 있어서 다른 방안이 될 수 있음
    setInputs({
      username: '',
      email: ''
    });

    // 나중에 id 가 4 인 값 조회 한다면
    console.log(nextId.current);

    // onCreate()를 사용하고
    // nextId값에 1을 더해줌
    // 이 값이 바뀐다고 해서 컴포넌트가 리렌더링 되진 않는다
    nextId.current += 1;
  }

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

export default App;

 

 

React - useRef 사용해 컴포넌트 안의 변수 만들기