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

    )

}

✅CreateUser.js

CreateUser 컴포넌트를 만든다.

CreateUser 컴포넌트는 총 4개의 인자를 받아오는데 여기서 onChange 함수는 인풋 값이 바뀌게 될때 호출할 이벤트 함수고 onCreate는 버튼을 눌렀을 때 새로운 항목을 등록해주는 함수이다.

 

import React,{ useRef, useState } from "react";

import "./App.css";

import CreateUser from './CreateUser';

import UserList from './UserList';

function App() {

  const [inputs, setInputs] = useState({

    username: '',

    email: ''

  });

  const {username, email} = inputs;

  const onChange = (event) => {

    const {name, value} = event.target;

    setInputs({

      ...inputs,

      [name]: value

    });

  };

  const users = [

    {

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

    

  const onCreate = () => {

    setInputs({

      username: '',

      email: ''

    });

    nextId.current += 1;

  };

  return (

    <>

      <CreateUser

        username={username}

        email={email}

        onChange={onChange}

        onCreate={onCreate}

      />

      <UserList users={users}/>

    </>

  );

}

export default App;

그런 다음 App 컴포넌트에서 위와 같이 작성하면 된다.

그리고 컴포넌트의 props로 전부다 넣어준다. (props로 함수도 전달)

여기까지 해본 후  등록 버튼을 눌렀을 때 input의 값이 리셋되면 잘 된 것이다.

 

그리고 지금 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'

    }

  ]);

이렇게 useState로 감싸주고 추출하면 편하다.

 

🎹 배열에 변화주기

이제 배열에 변화를 줄 차례이다.

배열에 변화를 줄 때에도 전에 객체에 변화를 줄 때 ...inputs로 모든 것을 복사해서 붙여넣고 특정 값을 덮어씌웠던 것 처럼 비슷하다.

push같은 것을 쓰지 않고 기존의 배열을 바꾸지 않으면서 새로운 배열을 만들어서 거기에 변화를 주는 방식으로 구현을 해주어야 한다. 불변성을 지켜주어야 하기 때문이다. (push, splice, sort 사용하면 안된다. 꼭 사용하고 싶다면 배열을 복사하여 사용하여야 한다.)

 

🎹 불변성을 지키면서 배열에 새 항목을 추가하는 방법

불변성을 지키면서 배열에 새 항목을 추가하는 방법은 2개가 있다.

 

1. 스프레드 연산자 사용

const onCreate = () => {

    const user = {

      id: nextId.current,

      username,

      email

    };

    setUsers([

      ...users,

      user

    ]);

    setInputs({

      username: '',

      email: ''

    });

    nextId.current += 1;

  };

onCreate 함수에서 다음과 같이 작성하면 된다.

 

2. concat 함수 사용

concat은 배열끼리 붙여주는 것인데  예를 들면 a = [1,2,3] b=[4,5,6]이라면 answer= a.concat(b) 이런식으로 사용하면 answer=[1,2,3,4,5,6]이 된다.

concat은 기존의 배열을 수정하지 않고 새로운 원소가 추가된 새로운 배열을 만들어 준다. concat은 꼭 배열끼리만 사용해야하는 것은 아니다. 그냥 users배열에 user를 concat하면 users배열에 user 항목이 붙여넣기 된다.

 

setUsers(users.concat(user));

따라서 setUsers 부분을 위와 같이 concat 함수를 사용하여 작성할 수도 있다.