Typescript - 두가지 key 추적을 위한 Map 객체 활용

 

 

어떤 데이터가 있고, 그 안에 {키-값, 키-값} 형태의 객체로 이루어진 배열이 있다.

이 형태의 배열이 여러 개 연속되어 2차원 배열을 이룬다.

 

이를 기반으로, 다음은 가상 키보드를 만드는 과정에서 만든 데이터이다.

 

interface Key {
  code: string;
  label: string;
}

const mainKeys: Key[][] = [
  [
    { code: "`", label: "~" },
    { code: "1", label: "1" },
    { code: "2", label: "2" },
    { code: "3", label: "3" },
    { code: "4", label: "4" },
    { code: "5", label: "5" },
    { code: "6", label: "6" },
    { code: "7", label: "7" },
    { code: "8", label: "8" },
    { code: "9", label: "9" },
    { code: "0", label: "0" },
    { code: "-", label: "-" },
    { code: "=", label: "+" },
    { code: "backspace", label: "←" },
    { code: "Delete", label: "DEL" },
  ],
  [
    { code: "tab", label: "TAB" },
    { code: "q", label: "Q" },
    { code: "w", label: "W" },
    { code: "e", label: "E" },
	
    // 중략...
  ]
]

 

 

code는 키보드 입력을 받는 실제 key의 이름이고, label은 화면 상에 보여질 버튼의 내용이다.

 

알파벳이나 숫자키라면 두 값이 같거나, 단순히 toUpperCase() 등을 통해 통일하여 추적할 수 있다.

그러나 그 값이 서로 규칙성이 없는 경우 (예: Delete - DEL) 는 추적할 수 없다.

 

이런 경우 입력된 code 값만을 통해 짝지어진 label의 값을 추적하는 방법을 알아보자.

 

 

Map 객체 활용하기

const codeToLabelMap = new Map<string, string>();
	mainKeys.forEach(row => {
    	row.forEach(elem => {
        	codeToLabelMap.set(elem.code, elem.label);
        })
      })
      
function findLabelByCode(code: string): string {
	return codeToLabelMap.get(code)
}

const exampleCode = "`" // 찾고자 하는 코드값
const exampleLabel = findLabelByCode(exampleCode) // 만든 함수에 찾고자 하는 코드값 입력
console.log(exampleLabel) // "~"

 

 

Map은 javascript 내장 자료구조이다.

키-값 쌍을 객체 형태로 저장하게 된다.

 

new Map<string, string>( ) 에서 첫번째 string은 code가 들어갈 자리이고, 두번째 string은 label이 들어갈 자리이다.

 

 

mainKeys 배열을 순회한다.

가장 바깥쪽 배열인 row를 forEach로 순회하고, 그 안에 있는 요소인 각 객체 { code: "`", label: "~" } 조각(element)들을 순회한다.

위에서 만들어둔 codeToLabelMap 객체의 code, label에 들어갈 값을 각각 지정한다.

 

이제 code, label 을 담은 새로운 객체가 완성되었으니, findLabelByCode 함수를 작성해 원하는 값에 접근한다.

입력될 값 code는 문자열이므로 (code: string) 이라고 작성하고, 출력될 값 또한 문자열이므로 그 바깥에 선언해준다.