[React] TypeScript + 객체 값 순회하기

분리수거 서비스 웹 페이지를 만들면서 퀴즈와 답을 화면에 그려야했다. 퀴즈 문제와 답에 관련된 데이터를 받아와서 화면에 표시해주어야 했기 때문에, 이 때 사용한 객체를 순회하는 방법을 소개한다.

 

---

 

Object.values().map() 으로 객체 순회하기

1. 객체의 type을 설정한다.

2. 객체의 값(value)을 map() 함수를 통해 순회한다.

 

* 객체의 값 뿐만 아니라 키도 필요하다면 다음의 함수를 사용할 수 있다. 

Object.keys(obj)	객체의 키만 담은 배열을 반환합니다.
Object.values(obj)	객체의 값만 담은 배열을 반환합니다.
Object.entries(obj)	[키, 값] 쌍을 담은 배열을 반환합니다.

 

그리고 이 때! 주의할 점은 map() 함수 내에서 리턴할 때, {중괄호}를 사용하면 return을 생략할 수 없고, (소괄호)를 사용하면 return이 생략 가능하다.

 

전체 코드

import React from "react";

type AnswerProps = {
    1: String,
    2: String,
    3: String,
    4: String,
}

const answer: AnswerProps = {
    1: "비운다",
    2: "헹군다",
    3: "분리한다",
    4: "정리한다",
}

const Quiz = () => {
    return (
        <div>
            <div>분리배출의 핵심 4가지가 아닌것은?</div>
            <div>
            { 
                Object.values(answer).map((value, index) => (
                    <div key={index}>
                        <AnswerButton>{value}</AnswerButton>
                    </div>
                ))
            }
            </div>
        </div>
    )
}

export default Quiz;