Object.keys()

Object.keys는 객체의 속성 이름(키)들을 배열 형태로 반환할 때 사용합니다. 이를 통해 객체의 모든 키에 대해 반복 작업을 수행하거나, 키의 배열을 필요로 하는 작업을 수행할 수 있습니다.

Object.keys의 사용 시기와 예시

1. 객체의 모든 키를 순회할 때

객체의 모든 키를 순회하며 작업을 수행하고자 할 때 Object.keys를 사용할 수 있습니다.

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj).forEach(key => {
    console.log(key, obj[key]);
});
// Output:
// a 1
// b 2
// c 3

2. 객체를 배열로 변환하여 반복 작업을 할 때

객체의 키를 배열로 변환한 후 map, filter, reduce와 같은 배열 메서드를 사용할 때 유용합니다.

const obj = { a: 1, b: 2, c: 3 };

const values = Object.keys(obj).map(key => obj[key]);
console.log(values);
// Output: [1, 2, 3]

3. 객체의 특정 키만을 선택적으로 다룰 때

객체의 특정 키를 조건에 따라 필터링하여 작업할 수 있습니다.

const obj = { a: 1, b: 2, c: 3 };

const filteredKeys = Object.keys(obj).filter(key => obj[key] > 1);
console.log(filteredKeys);
// Output: ['b', 'c']

예제: 그룹화된 데이터를 Object.keys로 처리하기

이제 reduce로 생성된 groupedData 객체를 Object.keys를 사용하여 Quest 컴포넌트로 전달하는 예제를 다시 살펴보겠습니다.

그룹화된 데이터 예제

const surveyData = [
    { questIdx: '6', selIdx: '1', answerTitle: '가', questTitle: '질문 1', questDesc: '질문 1 설명', questType: 'S', answerWeight: 1, answerOrderNo: 1 },
    { questIdx: '6', selIdx: '2', answerTitle: '나', questTitle: '질문 1', questDesc: '질문 1 설명', questType: 'S', answerWeight: 2, answerOrderNo: 2 },
    { questIdx: '7', selIdx: '3', answerTitle: '다', questTitle: '질문 2', questDesc: '질문 2 설명', questType: 'M', answerWeight: 3, answerOrderNo: 1 },
    { questIdx: '7', selIdx: '4', answerTitle: '라', questTitle: '질문 2', questDesc: '질문 2 설명', questType: 'M', answerWeight: 1, answerOrderNo: 2 }
];

const groupedData = surveyData.reduce((acc, cur) => {
    const { questIdx, questTitle, questDesc, questType, selIdx, answerTitle, answerWeight, answerOrderNo } = cur;
    if (!acc[questIdx]) {
        acc[questIdx] = {
            questTitle: questTitle,
            questDesc: questDesc,
            questIdx: questIdx,
            questType: questType,
            answers: []
        };
    }
    acc[questIdx].answers.push({
        selIdx: selIdx,
        answerTitle: answerTitle,
        answerWeight: answerWeight,
        answerOrderNo: answerOrderNo
    });
    return acc;
}, {});

Object.keys를 사용한 렌더링

import React from 'react';
import Quest from './Quest';

export default function SurveyDetail() {
    const [surveyData, setSurveyData] = React.useState([]);

    // group data를 만드는 로직
    const groupedData = surveyData.reduce((acc, cur) => {
        const { questIdx, questTitle, questDesc, questType, selIdx, answerTitle, answerWeight, answerOrderNo } = cur;
        if (!acc[questIdx]) {
            acc[questIdx] = {
                questTitle: questTitle,
                questDesc: questDesc,
                questIdx: questIdx,
                questType: questType,
                answers: []
            };
        }
        acc[questIdx].answers.push({
            selIdx: selIdx,
            answerTitle: answerTitle,
            answerWeight: answerWeight,
            answerOrderNo: answerOrderNo
        });
        return acc;
    }, {});

    return (
        <div>
            {Object.keys(groupedData).map((questIdx) => (
                <Quest key={questIdx} questData={groupedData[questIdx]} />
            ))}
        </div>
    );
}

설명

1. 그룹화된 데이터 생성:

   • reduce 함수를 사용하여 surveyData 배열을 questIdx 기준으로 그룹화합니다.
   • 각 그룹에는 questTitle, questDesc, questIdx, questType, 그리고 answers 배열이 포함됩니다.

2. Object.keys를 사용한 키 배열 생성:

   • Object.keys(groupedData)는 groupedData 객체의 모든 키(즉, questIdx 값들)를 배열로 반환합니다.

3. 키 배열 순회 및 렌더링:

   • map 함수를 사용하여 각 questIdx에 대해 Quest 컴포넌트를 생성합니다.
   • 각 Quest 컴포넌트는 해당 questIdx 그룹의 데이터를 questData prop으로 받습니다.

결론

Object.keys는 객체의 모든 키를 배열로 반환하여, 해당 키들을 순회하거나 배열 메서드를 사용한 작업을 할 때 유용합니다. 이 예제에서는 groupedData 객체의 키를 사용하여 각 그룹의 데이터를 Quest 컴포넌트로 전달하고 렌더링하는 데 사용되었습니다.