React(80) 객체 값을 동적으로 할당하기

 

 

나는 if 문과 switch 문의 신봉자였다. 하지만 조건문을 사용(남발)하게 되면,

- 조건문이 속한 함수가 매번 렌더된다.

- 조건에 맞는지 일일이 검사를 해야한다.

 

얼마전 사수님과 이야기하다 조건문을 최소화하여 객체의 키값으로 바로 해결할 수 있는 방법을 사용해보게 되었다. 

- 객체는 첫 렌더시에 이미 메모리에 저장되있고, 키값만 넣어주면 바로 가져올 수 있다.

- 객체는 순서를 보장하지 않는다. (즉, 순서대로 검사한다는 개념 자체가 없다 원샷원킬)

 

 

---

React(80) 객체 값을 동적으로 할당하기

 

원하는 자동차 회사를 알려주면, 회사별로 판매하는 차 가격에 대한 정보를 알려주는 코드라고 해보자.

일단 자동차 회사 타입을 정해주고, 차 가격 정보를 알려주는 객체도 만들어 보았다.

(🐣 "흠 나는 신입 딜러라 아직 받은 게 소나타 정보 밖에 없군, 이걸로라도 잘 팔아봐야지💪")

type CarKeyType = 'Hyundai'|'Honda'|'Kia'|'None'; // 키 타입지정
  
interface CarSaleInfo { // 객체 인터페이스
  carSale: CarSaleItem,
  carOwner: CarSaleItem,
  .
  .
  .
}

interface CarSaleItem {  // 객체속 미니객체 인터페이스
  id: string,
  title: string,
  price: number
}

const carSaleInfo: CarSaleInfo = { // 오늘의 주인공(이미 값을 가짐)
  Hyundai : {
    id: 'promotion',
    title: '현대 소나타',
    price: 120000000,
  },
  None: undefined
};

 

 

좀 복잡해보일 수도 있겠지만, 관건은 default 값을 하나 지정해주고, 그뒤 조건에 맞는 key 값을 바로 넣어준다는 것이다.

const carOption = useMemo(() => {    
  let key: CarKeyType = 'None'; // 기본값을 'None' 으로 지정해놓는다.        

  if (carType === 'Sonata') {	// 차 타입이 '소나타'일 때,
    key = 'Hyundai';		// 키를 '현대'로 정해준다.
  }
    
  return {
    carSale: carSaleInfo[key]	  // 정해준 키값이 들어간다
    carOwner: carOwnerInfo[key],  // 만약 키가 없으면 default 값이 들어간다
    .
    .
    .
  };
}, [carSaleInfo]); // 요 객체값이 변화하면 다시 호출된다

 

 

이제 HTML 태그를 통해 출력해보자. 위에서 받아온 객체를 검사해서 한녀석 한녀석 다 보여주자

return Object.keys(carOption).map(keyName => { // 위에서 만든 {유사객체배열}을 검사해보자
  const plan = carOption[keyName as keyof CarSaleInfo]; // 미니 객체를 하나씩 소환했다
  return (
    <div key={keyName}>
      {plan.title}
      {plan.price}
    </div>
  );
}