[TypeScript] 유틸타입 레코드 Record<Keys, values>, 객체 생성하기 Object.fromEntries

카카오 맵 마커에 마우스를 올리면 해당 마커만 정보를 표기하고 싶은데 내가 선택한 마커를 어떻게 구분해야 하나 고민하다 유틸타입인 Record <Keys, values>를 알게 됐다

Record <Keys, values>는 TypeScript의 유틸리티 타입으로 객체의 키와 값 타입을 정의할 수 있다

각 마커에 id값을 키로, 마커 활성화 여부를 확인하기 위해  boolean 값을 값으로 넣어 state를 만들어준다

그리고 Object.fromEntries는 배열로 주어진 키-값을 받아 객체로 변환하는 내장메서드로 마커의 id를 키로 값은 false로 넣어 객체 생성 완료

 

1. 마커의 hover 상태를 추적하기 위해 키는 id(string) 값은 false( boolean)  객체 타입의 state 생성

2. 마커배열을 Object.fromEntries 와 map으로 id(키) : false(기본 값) 객체 생성

3. 마우스 이벤트인 onMouseOver, onMouseOut으로 상태 변경해 주면 끝

const [isOpenStates, setIsOpenStates] = useState<Record<string, boolean>>(
  Object.fromEntries(storePositions.map((item) => [item.id, false]))
);

//유틸리티 타입
//객체의 키와 값의 타입 정의 시 사용된다
Record<Keys, values>

// Object.fromEntries는 키-값 쌍의 목록을 객체로 변환한다
// 스토어포지션ID:false 이런 구조로 만들어주는것
Object.fromEntries(storePositions.map((item) => [item.id, false]))

//마우스 이벤트로 상태 변경
 onMouseOver={() =>
   setIsOpenStates((prev) => ({
       ...prev,
       [item.id]: true,
    }))
  }
  
  onMouseOut={() =>
    setIsOpenStates((prev) => ({
        ...prev,
        [item.id]: false,
    }))
  }