[React] Map을 State로 사용하기

React를 사용할 때 State로 Map을 사용하는 경우가 있다. 

 

이때 어떤 방식으로 추가, 삭제, 등을 할 것인가? 

const [state, setState] = React.useState(new Map());

// 추가
const add = (key, value) => {
  setState((prev) => new Map([...prev, [key, value]]));
};

// 없는 경우에만 추가
const upsert = (key, value) => {
  setState((prev) => new Map(prev).set(key, value));
}

// 삭제
const delete = (key) => {
  setState((prev) => {
    const newState = new Map(prev);
    newState.delete(key);
    return newState;
  });
}

// 초기화
const clear = () => {
  setState((prev) => new Map(prev.clear()));
}

 

출처 

https://chinsun9.github.io/2021/02/17/react%EC%97%90%EC%84%9C-Map%EC%9D%84-state%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%A0-%EB%95%8C/

react에서 Map을 state로 사용할 때