react study / 배열 입력 / 수정 / 삭제

app.js 

import './App.css';
import React from 'react';
import { useRef } from 'react';
import { 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: 'velopert',
      email: 'public.velopert@gmail.com',
      active: false
    },

    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: true
    },

    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]);

  const nextId = useRef(4);

  const onCreate = () => {

    const user = {
      id: nextId.current,
      username,
      email
    }

    //setUsers([...users, user]) //spread연산자 사용
    setUsers(users.concat(user)); //concat함수 사용 - 기존 배열수정 x, 새로운 원소가 추가된 새로운 배열을 만든다 


    setInputs({
      username: '',
      email: ''
    });

    nextId.current += 1;
  };

  const onRemove = id => {
    // filter : user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // user.id가 id인것을 제거

    setUsers(users.filter(user => user.id !== id))
  }

  const onToggle = id => {
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    )
  }
 
  return (
    <>
      <CreateUser 
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}/>
      <UserList users={users} onRemove={onRemove} onToggle={ onToggle }/>
    </>
    
  )
}

export default App;

 

UserList.js

import React from 'react';

function User({ user, onRemove, onToggle }) {
    return (
        <div>
            <b style={{
                cursor: 'pointer',
                color: user.active ? 'green' : 'yellow'
            }}
                onClick={() => onToggle(user.id)}>
                {user.username}
            </b>

            <b> | { user.email }</b>
            <button onClick={() => onRemove(user.id)}> 삭제 </button>
        </div>
    )
}

function UserList({users, onRemove, onToggle}) {

    

    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id} onRemove={onRemove} onToggle={ onToggle}/> //index = user.id 배열을 효율적으로 업데이트 하기 위해서 
            ))}
      </div>
    )
}

export default UserList;

 

 

 

👇참고서!!

react.vlpt.us/basic/09-multiple-inputs.html