React(59) 맵(Map) 사용하기 - set / get / has / delete / clear / size

 

우리는 보통 데이터를 담는 그릇 (a.k.a 자료구조) 으로 객체나, 배열을 많이 사용한다.

하지만 사용하다 보면 여러가지 형태의 자료구조가 필요하다. 그중 하나인 맵(Map) 을 알아보자.

• 객체 – 키가 있는 컬렉션을 저장
• 배열 – 순서가 있는 컬렉션을 저장

 

---

맵(Map) 이란

 

일단 겉 모습은 객체랑 비슷하다. 쉽게 말해 커스텀이 가능한 객체 느낌이다.

 

키-값 쌍을 저장하며 각 쌍의 삽입 순서를 기억한다. 또한 Map 은 함수, 객체 등을 포함한 모든 값을 키와 값으로 사용할 수 있다.

일반적인 object 는 순서를 기억하지는 않는다.

 

 

리액트에서 맵(Map) 사용하기

 

1. new Map() – 맵 만들기 (리액트에서는 useState 로 맵을 선언했다.)

// useState 로 타입이 맵인 변수 array 를 선언해주자 (키는 string, 값은 number 이다)
const [array, setArray] = 
	useState<Map<string, number>>(new Map<string, number>());

 

필요에 따라 일반 변수로 선언해도 무방하다

// 임시어레이 를 하나 만들어 array 를 넣어놨다
const tempArray = new Map(array);

 

 

2. set  과  delete 사용하기

• map.set(key, value) – key를 이용해 value를 저장한다.
• map.delete(key) – key에 해당하는 값을 삭제한다.

if (clicked) { 		     // 클릭 했을 때
  tempArray.set('hi', 100); // tempArray에 키가 hi, 값이 true 인 객체를 추가
} else {
  tempArray.delete('hi');    // 클릭 안하면, hi키를 가진 객체를 삭제
}
setArray(tempArray);	     // 바뀐 맵 객체를 array로 업데이트 해주자

 

 

3. has 사용하기

• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환한다.

  // array에 'hi' 키가 있으면 true, 없으면 false
  <div className={array.has('hi') ? 'open' : ''}>
    팝업창 열기
  </div>

 

 

4. get 사용하기

• map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환한다.

// array 에 hi 라는 키가 있으면, hi의 값(100)을 내보내고 아니면 0 이 나온다
<div className="content">
  {array.has('hi') ? array.get('hi') : '0'}
</div>

 

 

5. 그 외

• map.clear() – 맵 안의 모든 요소를 제거한다.
• map.size() - 맵 안의 요소의 갯수를 반환한다.