React(93) TypeScript - 유사객체배열에서 원하는 값 사용하기

 

 

 

유사 객체 배열은 {객체 안에 {객체} 들이 배열} 처럼 들어있는 객체 형식을 말한다.

 

배열과 유사객체배열의 차이는 Array 와 Object 의 차이와 같다.

배열은 순서가 있으며, index 로 요소를 찾는다. 유사객체배열은 순서가 없으며, key 로 요소를 찾는다.

 

순서가 있고 없고의 차이는 크다.

배열은 메모리에서 연속된 공간을 할당 받는다. 그래서 맨 앞에 요소를 추가한다면 배열의 요소들은 순서대로 한 칸씩 옆으로 옮겨야만 한다.

객체는 메모리에 할당될 때 객체의 값에  참조 값을 통해 접근한다. 그렇기 때문에 순서를 가진 것 같이 나열해놔도 각자 주소가 다르다.

그래서 동적으로 생성되는 데이터의 경우 배열보다는 객체 형식으로 표현하는게 성능 상 더 좋다.

 

자 그럼 유사객체배열에서 원하는 값을 핸들링하러 가보자

 

 

---

React(93) TypeScript - 유사객체배열에서 원하는 값 사용하기

 

자, 여기 우리가 사용할 객체 유사 배열 fruits 가 있다.

const fruits: FruitType = { // 얘는 FruitType 이라는 타입을 가지고 있다
  apple: {
    color: "red",
    size: "small"
  },
  banana: {
    color: "yellow",
    size: "medium"
  },
  grape: {
    color: "green",
    size: "large"
  },
}

 

 

TypeScript 의 유틸타입인 Record 를 사용해서 좀 멋잇게 유사 객체 배열을 표현해주자

Record<key, value>는 이런식으로 사용한다. key 에는 string 을 value  에는 FruitInfo 를 사용할것이다. 

type FruitType = Record<string, FruitInfo>; // key=string, value= FruitInfo 이라는 뜻

interface FruitInfo {
  color: string;
  size: string;
}

 

 

바로 키값을 넣어줘서 바나나 객체만 추출해주자

const key = 'banana';
const fruit = fruits[key]; // 바나나를 키로 넣어주자
console.log(fruit); 
//   {
//    color: "yellow",
//    size: "medium"
//   },