React 큰 배열 상태 관리

배경

회사에서 임직원을 관리하는 관리자페이지를 만드는데 임직원이 1000명이 넘게 있다. 담당자가 하나씩 수정하고 저장하다가 너무 오래걸려서 한번에 다 수정하고 일괄저장(수정)을 통해 저장하고 싶어한다.

전제 조건

리액트를 사용하며 컴포넌트를 통해 관리한다. 각 임직원에 대한 행을 컴포넌트(몰큘)로 만든다.

구현

페이지


function Page() {
  const rows = [];

  const handleSubmit = (data) => {
    console.log(data);
  };

  return (
    <EmployeeTable
      rows={rows}
      onSubmit={handleSubmit}
    />
  );
}

개별행


function EmployeeTable({ ... }) {

  return rows.map(item => (<Employee item={item} />));

}

Employee


function Employee({ ... }) {
  return <>
    <input onChange={} value={item.name} />
    <input onChange={} value={item.age} />
    <input onChange={} value={itrm.gender} />
    <input onChange={} value={item.description} />
  </>
}

Employee에는

name

gender

description

이 저장되어있고 전부 string이라 가정하고 진행.

id는 정수로 각 구분하기 위해 저장.

handleSubmit을 했을때 수정된 배열을 출력해줘야하.