[React] 배열에 항목 추가하기

1. username, eamil, 등록하기 버튼 ui 준비

- 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;

 

2.  배열에 항목 추가하기 구현

- App.js

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

function App_4() {

  //CreateUser에서 필요한 props 준비
  const [inputs, setInputs] = useState({ 
    username:'',
    email:'',
  }); //기본 설정
  const {username, email} = inputs; //inputs에서 username과 email 추출

  //onChange 구현
  const onChange = e => {
    const {name, value} = e.target;
    setInputs({
      ...inputs,
      [name]: value //name값을 value로 덮어씌우겠다 //CreateUser에서 name이 가리키고 있는건 username이나 email
    });
  };
    
  // const users = [
    const [users, setUsers] = useState([
        {
            id: 1,
            username: 'velopert',
            email: 'public.velopert@gmail.com'
          },
          {
            id: 2,
            username: 'tester',
            email: 'tester@example.com'
          },
          {
            id: 3,
            username: 'liz',
            email: 'liz@example.com'
          }
    ]);

    const nextId = useRef(4);

    //onCreate 구현
    const onCreate = () =>{

      //새로운 user 객체 만듬
      const user = {
        id : nextId.current,
        username,
        email,
      }

      //1. 배열에 항목 추가 (기존배열 spread연산자로 복사하고 원하는 값 넣음 )
      // setUsers([...users, user]);
      //2. 배열에 항목 추가(concat 함수 이용)
      setUsers(users.concat(user));

      //등록 버튼 클릭시 input안에 있는 값 지우기
      setInputs({
        username:'',
        email:''
      });
      console.log(nextId.current); //4
      nextId.current += 1; 
    }

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

 

1) props 적용

<CreateUser

       username={username}

       email={email}

       onChange={onChange}

       onCreate={onCreate}

       />

 

2)  CreateUser에서 필요한 props 준비

 

-  username, email 공백으로 설정 후 inputs에 username과 email 추출

 const [inputs, setInputs] = useState({

    username:'',

    email:'',

  }); //기본 설정

  const {username, email} = inputs; //inputs에서 username과 email 추출

 

- onChang 구현

name값이 username 또는 email일 경우 value값으로 적용

 const onChange = e => {

    const {name, value} = e.target;

    setInputs({

      ...inputs,

      [name]: value //name값을 value로 덮어씌우겠다 //CreateUser에서 name이 가리키고 있는건 username이나 email

    });

  };

 

- 배열 객체상태로 만듬

  const [users, setUsers] = useState([

 

- onCreate 구현

user이라는 새로운 객체를 만든후

spread연산자 또는 concat 함수를 사용하여 복사후 추가

등록하기 버튼 클릭시 인풋박스는 공백이되고 nextId.current가 1씩 증가

const nextId = useRef(4);

 

const onCreate = () =>{

      //새로운 user 객체 만듬

      const user = {

        id : nextId.current,

        username,

        email,

      }

      //1. 배열에 항목 추가 (기존배열 spread연산자로 복사하고 원하는 값 넣음 )

      // setUsers([...users, user]);

      //2. 배열에 항목 추가(concat 함수 이용)

      setUsers(users.concat(user));

      //등록 버튼 클릭시 input안에 있는 값 지우기

      setInputs({

        username:'',

        email:''

      });

      console.log(nextId.current); //4

      nextId.current += 1;

    }