React - 배열 조작하기

목록

• Inroduction
• 배열 추가하기
• 배열 삭제하기
• 배열 수정하기
• Conclusion

📌Introduction

안녕하세요. 오늘은 react에서 배열을 어떻게 조작을 하는지에 대해 알아보겠습니다.

📌 배열 추가하기

일단 먼저 CreateUser라는 컴포넌트를 만들어보겠습니다. 그냥 간단한 컴포넌트예요. input 두개와 button이 하나가 있는 간단한 컴포넌트 입니다.
그리고 presentational component기 때문에 로직적인 부분은 props로 받아올거예요.

// CreateUser.js
import React from "react";

// onChange는 input에 onCreate는 버튼 이벤트 입니다.
function CreateUser({ username, email, onChange, onCreate }) {
  return (
    <div>
      <input
        name="username"
        placeholder="username"
        onChange={onChange}
        value={username}
      />
      <input
        name="email"
        placeholder="email"
        onChange={onChange}
        value={email}
      />
      <button onClick={onCreate}>Register</button>
    </div>
  );
}

export default CreateUser;

자 이제 상위 부모에서 props를 제대로 내려줘볼까요?

// 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: "eddie",
      email: "eddie@gmail.com",
    },
    {
      id: 2,
      username: "sam",
      email: "sam@gmail.com",
    },
    {
      id: 3,
      username: "tom",
      email: "tom@gmail.com",
    },
  ]);

  const nextId = useRef(4); // component가 re rendering 될때에도 4로 기억이됌

  const onCreate = () => {
    // 항상 불변성을 유지해야 하기 때문에 users에서 바로 푸쉬를 하지 말아주세요.
    setUsers([
      ...users,
      {
        id: nextId.current,
        username,
        email,
      },
    ]);
    setInputs({
      username: "",
      email: "",
    });
    nextId.current += 1;
  };

  return (
    <>
      <h1>CreateUser</h1>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <hr />
      <h1>UserList</h1>
      <UserList users={users} />
      <hr />
    </>
  );
}

export default App;

📌 배열 삭제하기

배열의 삭제는 마찬가지로 불변성을 지키면서 삭제를 시켜줘야 해요. 그렇기에 filter를 가장 많이 사용하게 됩니다.

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

그리고 해당 버튼에 연결을 할때는 이렇게 연결을 시켜줘야해요.

function User({ user, onRemove }) {
  return (
    <div>
      <b>
        {user.username} <span>{user.email}</span>
        // ⭐️ 반드시 함수로 넘겨 주어야 해요.
        // 만약에 vue처럼 onRemove(user.id) 이렇게 넘겨준다면 button이 생성할때 함수가 실행이 되어버려요.
        <button onClick={() => onRemove(user.id)}>X</button>
      </b>
    </div>
  );
}

📌 배열 수정하기

배열의 수정은 map함수를 사용하면 됩니다. 이때도 항상 불변성을 유지해야 한다는 것을 유념해주세요!

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

📌 Conclusion

이렇게 배열을 react에서 조작을 하는 방법에 대해서 알아보았습니다. 처음 불변성을 지키는게 참 어렵기도하고 익숙치 않지만 나중에 immutable.js를 사용하여 불변성을 지키는 방법에 대해서 같이 알아보도록 하겠습니다. 정리를 하자면 array에 추가를 할땐 concat 삭제를 하면 fitler 변경을 할땐 map 함수를 사용한다는 사실에 대해서 알아두시면 좋을거 같아요! 그럼 다음 시간에 봐요 안녕!