본문 바로가기

React/기능

[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로 사용할 때

ES6 Map with React.useState ; https://medium.com/@jalalazimi/es6-map-with-react-usestate-9175cd7b409b 를 참고하였다 맞는 예12345678910111213141516171819202122const [state, setState] = React.useState(new Map(

chinsun9.github.io

 

반응형

'React > 기능' 카테고리의 다른 글

[React] useCallback 그리고 React.memo  (0) 2022.10.27
[React] useRef 그리고 useState  (1) 2022.10.26
[React] 컴포넌트 합성  (1) 2022.10.21
[React] react-router-dom 사용하기  (1) 2022.10.05
[React] useLayoutEffect  (0) 2022.02.08