[React] state데이터 object로 관리/수정하기

배열을 이용하여 state를 관리 할 경우
state 데이터들의 내부 프로퍼티를 수정할 때 복잡함이 생긴다.

 

예를들면

const usersState = [
  {
    id: 1,
    name: "Jay",
    age: "28",
    job: "Developer",
  },
  {
    id: 2,
    name: "Luby",
    age: "30",
    job: "Designer",
  },
  {
    id: 3,
    name: "Kate",
    age: "30",
    job: "Planner",
  },
];

위와 같이 3명의 유저 데이터를 관리한다고 했을 때
만약 유저의 name을 변경한다고 하면 어떻게 처리해야할까?

변경된 값과 변경할 name을 가진 데이터의 id값을 보내고
기존의 state에서 id값과 일치하는 데이터를 찾아서
일치한다면 수정된 데이터를, 일치하지 않으면 기존 state를 반환하는 방식으로 짤 수 있겠다.

 

const updateUser = (value, id) => {
  const update = usersState.filter((user) => {
    if (user.id === id) {
      return { ...user, name: value };
    }
    return user;
  });
 setUsersState(update);
};

하지만 위와 같은 코드를 짤 경우
user의 데이터가 적다면 괜찮겠지만  

user데이터가 몇 천, 몇 만개이상이며 심지어 버튼 클릭으로 완료되는 것이 아닌

age를 카운트 해서 실시간으로 계속 변경된 값을 보여줘야하는 경우라면?
키보드를 칠때마다 변경된 데이터 값을 실시간으로 보여줘야 되는 경우라면?
하나 변경할 때 마다 몇천 몇만개의 데이터를 무조건 조회를 해야 되는 것이다..ㅠ

 

불변성을 유지하면서 이 부분에 대해서 방법이 없을까 하던 와중에
object형식으로 데이터를 관리하는 것을 알게 되었다.

 

const usersState = {
  1: {
    id: 1,
    name: "Jay",
    age: "28",
    job: "Developer",
  },
  2: {
    id: 2,
    name: "Luby",
    age: "30",
    job: "Designer",
  },
  3: {
    id: 3,
    name: "Kate",
    age: "30",
    job: "Planner",
  },
};

key에 id값을 적고 value부분에 데이터를 담아주는 형식이다.
위와 같이 데이터를 저장하면 해당하는 id값의 데이터를 보다 간편하게 변경할 수 있다.

 

const updateName = (user) => {
  const update = { ...usersState };
  update[user.id] = user;
  setUsersState(update);
};

updateName()에 user데이터를 전달할 때
변경된 name값을 가진 user데이터를 보내고

updateName()에서 key값(id)를 이용하여 데이터를 변경한다.