배열에 내용 수정하기

• 각 배열들에 "수정" 버튼을 추가하고 정보를 입력하는 부분에 "업데이트" 버튼을 추가하였다.
• "수정" 버튼을 눌렀을 때 해당 배열의 값이 input 태그에 입력되고, 값을 변경한 이후 "업데이트" 버튼을 누르면 배열의 내용이 업데이트 되도록 구현하였다.
• 해당 배열의 계정명을 클릭했을 때 색상이 바뀌는 기능도 구현하였다.

원래 velopert님의 글은 계정명의 색상을 바꾸는 강의밖에 없었다. 조금 아쉽기도 하고 진짜 내용을 수정하는 것이 CRUD-Update 의 핵심이라고 생각해 추가로 구현해보았다 :)

항목 추가, 항목 제거와 마찬가지로 App.js에 수정(onModify), 업데이트(onUpdate) 함수들을 구현하였다.

수정을 할때는 props로 해당 user 객체를 받아온 다음, setInput 을 이용해 input 태그에 계정명과 이메일이 입력되도록 하였다. 나중의 업데이트를 대비해 해당 user 객체의 id 도 받아왔다.

 const onModify = (user) => {
    setInput({
      username: user.username,
      email: user.email,
      id: user.id
    })
  }

업데이트를 할때는 setUser 에서 map 메서드를 사용해 users 배열을 돌면서 input state의 id 와 일치하는 객체(원소)가 있다면 input state에 있는 username 과 email 의 값을 이용해 해당 객체를 새로 생성하였다. 이후 setInput을 이용해 input state를 초기화해주었다.

const onUpdate = () => {
    setUsers(
      users.map(user => user.id === id ? {...user, username: username, email : email} : user)
    )
    setInput({
      username: '',
      email: '',
      id: '',
    })
  }

해당 배열의 계정명을 클릭했을 때 색상이 바뀌는 기능을 구현하였다. 계정명을 클릭했을 때, 해당 배열의 id를 이용해 setUser 로 id가 일치하는 배열의 원소에 active: !active 속성을 주었다. onToggle 역시 App.js에서 구현하였다.

const onToggle = (id) => {
    setUsers(
      users.map(user => user.id === id? {...user, active : !user.active} : user)
    )
  }

실행 화면

부족하지만 참고할 분들이 계실까 코드를 첨부한다.

CreateUser.js

import React from "react";

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

export default CreateUser;

UserList.js

import React from 'react';

function User({user, onRemove, onToggle, onModify}){
  return(
    <div>
      <b
      style={{
        cursor: 'pointer',
        color: user.active ? 'green' : 'black'
      }} 
      onClick={()=> onToggle(user.id)}>{user.username}</b> <span>{user.email}</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
      <button onClick={() => onModify(user)}>수정</button>
    </div>
  )
}

function UserList({users, onRemove, onToggle, onModify}){
  return(
    <div>
      {users.map(user => <User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle} onModify={onModify}/>)}
    </div>
  )
}

export default UserList;

App.js

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

const App = () => {
  const [input, setInput] = useState({
    username: '',
    email: '',
    id: ''
  }) 

  const {username, email, id} = input;

  const onChange =(e)=>{
    const {name, value} = e.target;
    setInput({
      ...input,
      [name]:value
    })
  }

  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]);
  
  const nextId = useRef(4);

  const onCreate = () => {
    const newUser ={
      id: nextId.current,
      username:username,
      email:email
    }
    setUsers([
      ...users, newUser
    ])
    setInput({
      username: '',
      email: ''
    })

    nextId.current += 1;
  }
  const onUpdate = () => {
    setUsers(
      users.map(user => user.id === id ? {...user, username: username, email : email} : user)
    )
    setInput({
      username: '',
      email: '',
      id: '',
    })
  }

  const onRemove = (id) => {
    setUsers(users.filter(user => user.id !== id));
  }

  const onToggle = (id) => {
    setUsers(
      users.map(user => user.id === id? {...user, active : !user.active} : user)
    )
  }

  const onModify = (user) => {
    setInput({
      username: user.username,
      email: user.email,
      id: user.id
    })
  }
  
  return(
    <div>
      <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate} onUpdate={onUpdate}/>
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} onModify={onModify}/>
    </div>
  )
}

export default App;