[JS] Map 자료구조 - useState로 Value에 Object를 관리하기

각 키의 이름에 매핑하여 토글을 구현할 수 있도록, map 자료구조를 사용해서 선택여부라는 state를 object로 저장해 관리해보겠습니다.

 

 

기본적인 map 자료구조를 먼저 살펴보고 가봅시다.

주의해주실 점은! Object는 Key를 문자형으로 변환합니다. 반면에, Map은 Key의 타입을 변환시키지 않고 그대로 유지합니다.

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'str2');     // 숫자형 키
map.set(true, 'str3');  // 불린형 키

console.log(map.get('1')); // 'str1'
console.log(map.get(1)); // 'str2'

console.log(map.size); // 3

map[key] = value처럼 map[key]를 사용할 수 있긴 합니다만, map을 일반 객체처럼 취급하게 되는 제약이 생깁니다.

따라서 위와 같이, map전용 메서드 set, get 등을 사용하는 게 좋겠습니다!

 

 

00. Map 구조 State 생성

---

  const [mapObj, setMapObj] = React.useState(new Map());

 

 

01. Map 구조 Object 한 개 업데이트

---

예를 들어, 각 키에 매핑되는 value 에 isSelected라는 선택 여부 값이 있다고 해볼게요.

이를 응용해서 토글을 구현할 수 있겠죠??🤩🤩

  /**
   * 각 key마다 선택되었는지 확인 여부
   *
   * 전체 형태 -> Map(4) {'키0' => {…}, '키1' => {…}, '키2' => {…}, '키3' => {…}}
   *			하나씩 -> 0 : {key : "키1"} => {value : {isSelected : true}}
   *
   * 접근 : mapObj.get("키1").isSelected
   */
  const [mapObj, setMapObj] = React.useState(new Map());
  
  /** 선택 여부 업데이트 */
  const updateIsSelected = (key, value) => {
    setMapObj((prev) => new Map(prev).set(key, value));
  };
  
  /** 인자로 들어온 키에 매핑되는 선택 여부를 토글 (선택 -> 취소 || 취소 -> 선택) */
  function handleIsSelected(keyName) {
    updateIsSelected(keyName, {
      isSelected: !mapObj.get(keyName).isSelected,
    });
  }

 

02. Map 구조 Object 대량 삽입

---

map은 key값이 없을 때, 새롭게 추가됩니다.

그걸 이용해서, 위에서 구현한 코드를 사용해 구현해볼게요!

  /**
   * 각 key마다 선택되었는지 확인 여부
   *
   * 전체 형태 -> Map(4) {'키0' => {…}, '키1' => {…}, '키2' => {…}, '키3' => {…}}
   *			하나씩 -> 0 : {key : "키1"} => {value : {isSelected : true}}
   *
   * 접근 : mapObj.get("키1").isSelected
   */
  const [mapObj, setMapObj] = React.useState(new Map());
  
  /** 선택 여부 업데이트 */
  const updateIsSelected = (key, value) => {
    setMapObj((prev) => new Map(prev).set(key, value));
  };

/** 전체 데이터 처음 세팅 */
  React.useEffect(() => {
    전체 데이터.filter((data) => {
      updateIsSelected(data.name, { isSelected: true });
    });
  }, []);

전체 데이터에서 키값으로 줄 이름만 filter로 뽑아서 isSelected와 함께 object로 만들어, map에 삽입했습니다.

 

 

03. Map 구조 Object 전체 업데이트

---

  /**
   * 각 key마다 선택되었는지 확인 여부
   *
   * 전체 형태 -> Map(4) {'키0' => {…}, '키1' => {…}, '키2' => {…}, '키3' => {…}}
   *			하나씩 -> 0 : {key : "키1"} => {value : {isSelected : true}}
   *
   * 접근 : mapObj.get("키1").isSelected
   */
  const [mapObj, setMapObj] = React.useState(new Map());
  
  /** 선택 여부 업데이트 */
  const updateIsSelected = (key, value) => {
    setMapObj((prev) => new Map(prev).set(key, value));
  };
  
  /** 전체 선택 */
  function handleAllSelected() {
	전체데이터.filter((data) => {
        updateIsSelected(data.name, { isSelected: true });
      });
  }
  
    /** 전체 취소 */
  function handleAllCancel() {
	전체데이터.filter((data) => {
        updateIsSelected(data.name, { isSelected: false });
      });
  }

저는 이렇게 구현할 수 있었습니다!

 

 

더 좋은 의견 있으면 공유해주셔도 좋을 것 같아요 😁✨✨✨✨

 

감사합니다!!