react에서 Map을 state로 사용할 때

• ES6 Map with React.useState ; https://medium.com/@jalalazimi/es6-map-with-react-usestate-9175cd7b409b 를 참고하였다

맞는 예

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

틀린 예

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

const add = (key, value) => {
  state.set(key, value);
  setState(state);
};

// ...

• 원시 타입이 아닌 객체를 state로 다룰 때 실수하기 쉽다
• 완전히 새로운 레퍼런스?를 넣어줘야 상태가 변경되었다고 판단하고 리렌더링 된다

배열

array-state-example.ts

// work
const add = (value) => {
  setState((prev) => {
    return [...prev, value];
  });
};

// not work
const add = (value) => {
  setState((prev) => {
    prev.push(value);
    return prev;
  });
};

참고

• https://medium.com/@jalalazimi/es6-map-with-react-usestate-9175cd7b409b