[JavaScript] React - 배열 추가, 삭제, 수정

React

배열에 추가, 삭제, 수정

배열을 생성하고 배열을 렌더링 하는 방법을 알아봅시다.

import React, { useRef } from 'react';			   // <App.js>
import UserList from './UserList';

function App() {
  {/* User라는 배열을 App으로 가져와 props로 UserList에 넘겨준다 */}
  
  const [inputs, setInputs] = useState({
    username: '',
    email: '',
  })
  const { username, email } = inputs
  const onChange = e => {
    const { name, value } = e.target
    setInputs({
      ...inputs,	// 불변성을 지키기위해 기존의 상태를 복사하고 수정한다.
      [name]: value
    })
  }
  
  const users = [   
     {
      id: 1,
      username: 'Jongil',
      email: 'sji7532@gmail.com',
      active: true,
    },
    {
      id: 2,
      username: 'Test1',
      email: '1@gmail.com',
      active: false,
    },
    {
      id: 3,
      username: 'Sohn',
      email: '2@gmail.com',
      active: false,
    }
  ]

  const nextID = useRef(4) //초기값을 4로할거다 3개가 등록되어 있고 다음 아이디는 4 
 // useRef는 특정 돔을 선택하고 싶을때 사용할수도 있지만 어떠한 변수를 계속 기억하고 싶을때
 // 사용할 수도 있습니다. 리렌더링 되도 기억됩니다.

  const onCreate = () => {
    const user = {
      id: nextID.current,
      username,
      email,
    }
    // setUsers([...users, user])   
    //* concat 함수 : 배열 여러개를 하나의 배열로 합쳐줄 때 사용한다.
    setUsers(users.concat(user))
    setInputs({
      username: '',
      email: '',
    })
  }

  const onRemove = (id) => {
    // filter 메소드를 사용하여 선택한 객체의 id값을 가져와 동일하지 않은 것만 가져온다.
    // 즉, 1,2,3,4의 아이디 중 3번을 눌렀다면 1,2,4의 아이디만 가진 상태로 변경한다. (삭제)
    setUsers(users.filter(user => user.id !== id));
  }

  const onToggle = id => {
    // 해당 함수가 호출되면 이벤트가 발생한 id의 객체일 경우에만 user active의 상택를 변경(수정)
    setUsers(users.map(
      user => user.id === id 
      ? {...user, active: !user.active} 
      :  user
    ));
  }

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

export default App;

import React from 'react'				 // <UserList.js>

  {/*App으로 User 값을 지정했기 때문에 props로 user값을 받아와 사용한다.*/}
function User({ user }) {	
    return (
        <div>
            <b style={{
            // active일 경우 녹색, 아닐경우 검정색
            color: active ? "green" : "black",
            cursor: "pointer"
            }}
           // 이벤트 발생 id를 인자로 넘겨서 onToggle 실행
           // onClick={onToggle()}로 하면 절대 안됩니다. 렌더될때 함수가 실행되기 때문에
           // 꼭 에로우펑션으로 함.수.를. 넘겨주어야 합니다.
            onClick={()=> onToggle(id)}

            {username}
            </b> 
            <span>{email}</span>
           // 이벤트 발생 id를 인자로 넘겨서 onRemove 실행
            <button onClick={()=>   onRemove(id)}>삭제</button>
        </div>
    )
}

function UserList({ users }) {

    return (
        <div>
            {
                users.map(
                    (user, index) => (<User user={user} key={index} />)
                )
            }
        </div>
    )
}
export default UserList

• fastcampus 벨로퍼트님 리액트 강의자료를 공부하며 정리하며 작성하였습니다.