배열에 항목 추가하기

• spread 연산자 사용 : setUsers([…users, user]);/ setUsers([…배열이름, 합치고싶은배열])

• concat 함수 사용 : setUsers(users.concat(user)); / setUsers(배열이름.concat(합치고 싶은 배열));

• 구조에서 알아두면 좋은 점 : 부모 컴포넌트에서 state값(input 등등)과 함수를 작성하고 자식 컴포넌트에게 전달하는 구조를 기억하자

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
    });
  };
  const [users, setUsers] = useState([
    {
        id: 1,
        username: 'jini',
        email: 'genie9105@gamail.com'
    },
    {
        id: 2,
        username: 'biki',
        email: 'biki@gmail.com'
    },
    {
        id: 3,
        username: 'nado',
        email: 'nado@gmail.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;

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

[]의 의미는 key값으로 쓰겠다는 의미.

[name] 이 username과 email 두가지의 경우가 있는데, onChange라는 하나의 함수로 여러값을 저장하기 위해서 사용한것으로 보여진다.

[e.target.name]: e.target.value 이런식으로 state에 저장을하면 input마다 다른 함수를 사용하지 않고 여러개 input값을 저장할 수 있다.

username:e.target.value, email: e.target.value 이렇게 dynamic하게 key값이 들어간다.

const obj = { name : 'name' } === const obj[name] = 'name’

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C