React(69) TypeScript - 객체 속 객체의 반복문 사용하기

 

 

본 포스팅에서는

객체 반복문 사용법을 알아보고, 

반복문에서 객체의 키를 매핑할 때 뜨는 아래의 타입스크립트 에러를 살펴볼 것이다.

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

 

 

---

 

React(69) TypeScript - 객체 안 객체 반복문 사용하기

 

array 는 반복문을  많이 써봤는데, 객체를 돌려보는 건 처음이다. 특히 객체 안의 객체는 처음이다.

막상 한번 훓고 지나갔던 문법들이 동창회한 느낌이었다.

 

 

object.keys() 로 준비하기

객체를 배열렌더링을 위해 막연히 구글링하던 도중, 아주 유용한 녀석을 찾았다.

이녀석은 key 값만 쏙 빼서 배열화 시키는 object.keys() 함수이다. 이 과일 녀석(객체)이 있다고 쳐보자.

const fruit: FruitOption = {
    apple: {color: 'red', size: 'small'},
    banana: {color: 'yellow', size: 'medium'},
    grape: {color: 'purple', size: 'large'}
}

 

 

object.keys() 을 사용하면 ... ?

이렇게 키값만 쏙 빼와서 배열화 된다. 이 준비물로 객체가 못뚫는 map 이든, for 문이든 다 뚫어버릴 수가 있다.

object.keys(fruit) // ['apple', 'banana', 'grape']

 

 

자 이제 객체 렌더링을 시켜보자 

먼저, 객체를 반복문으로 돌리려면 아래와 같은 애들을 사용할 수 있다. (더 많지만, 일단 내가 찾아본 것만 나열해본다.)

• for in
• forEach 
• map 

 

forEach() 을 코드에 얹기

사실 forEach 나 map이나 구조는 비슷비슷하다.

Object.keys(fruits).forEach(keyName => {
      return (
        <div>
        {fruits[keyName]?.color}
        {fruits[keyName]?.size}
        </div>
      );
    });

 

map() 을 코드에 얹기

Object.keys(fruits).map(keyName => {
      return (
        <div>
         {fruits[keyName]?.color}
         {fruits[keyName]?.size}
        </div>
      );
    });

 

 

자, 이때까지는 잘 돌아가고있으리라 믿고 있었다고 한다.

 

 

 

예기치 못한 타입 에러발생 🥲

이렇게 끝난 줄 알았지만 막상 적용해보니 아래와 같은 타입에러가 뜨고 있었다. 🥲

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

 

 

왜 나에게 이런일이 ?

This happens because you try to access fruitOption property using string name. TypeScript understands that name may have any value, not only property name from plotOptions. So TypeScript requires to add index signature to fruitOption, so it knows that you can use any property name in fruitOption.

 

타입에러로 키값을 스트링 타입으로만 인지하고 있고, 내가 사용한 특정 타입의 객체로 인지하지 못하기 때문이었다.

타입스크립트는 내가 지정한 타입의 키를 인덱스로 써야한다고 강요한다. 역시 이 심술쟁이 녀석은 나를 고이 보내주지 못하는군...

 

 

그래서 타입스크립트의 소원대로 key 바로 뒤에 키 타입을 명시해주었다! 그러면 깔끔하게 해결!

fruits[keyName as keyof FruitOption]