reduce()

groupedData를 만드는 reduce 함수를 자세히 설명하겠습니다. 이 함수는 surveyData 배열을 순회하면서 questIdx 값을 기준으로 데이터를 그룹화하고, 각 그룹에 관련된 정보와 답변 리스트를 포함하는 구조를 만듭니다.

전체 코드

const groupedData = surveyData.reduce((acc, cur) => {
    // 현재 요소에서 필요한 속성 추출
    const { questIdx, questTitle, questDesc, questType, selIdx, answerTitle, answerWeight, answerOrderNo } = cur;
    // questIdx 값이 acc에 존재하지 않으면 초기화
    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;
}, {});

reduce 함수 설명

1. 초기값 설정:
   • reduce 함수는 두 개의 매개변수를 받습니다:
     • 누적값(acc)과 현재값(cur)을 인수로 받는 콜백 함수.
     • 누적값의 초기값으로 사용될 빈 객체 {}.
2. 콜백 함수:
   • reduce 함수의 콜백 함수는 배열의 각 요소(cur)에 대해 실행됩니다.
   • cur는 현재 순회 중인 요소를 나타내며, 구조 분해 할당을 통해 필요한 값을 추출합니다.
3. 객체 초기화:
   • acc 객체에 questIdx 값을 키로 사용하여 새로운 객체를 초기화합니다. 이미 해당 questIdx 키가 존재하는 경우에는 기존 객체를 사용합니다.

   if (!acc[questIdx]) {
       acc[questIdx] = {
           questTitle: questTitle,
           questDesc: questDesc,
           questIdx: questIdx,
           questType: questType,
           answers: []
       };
   }

4. 답변 추가:
   • cur 요소에서 추출한 답변 정보를 answers 배열에 추가합니다.

   acc[questIdx].answers.push({
       selIdx: selIdx,
       answerTitle: answerTitle,
       answerWeight: answerWeight,
       answerOrderNo: answerOrderNo
   });

5. 누적값 반환:
   • 최종적으로 누적값(acc)을 반환합니다. 이 누적값은 다음 순회에서 다시 사용됩니다.

   return acc;

예제 데이터

주어진 surveyData 배열이 다음과 같다고 가정합니다:

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: 4, answerOrderNo: 2 }
];

reduce 함수 실행 과정

1. 첫 번째 요소 처리 (cur = { questIdx: '6', ... }):
   • acc 객체는 {}.
   • questIdx = '6'이 acc에 존재하지 않으므로, 새로운 객체를 초기화합니다.
   • acc는 다음과 같이 업데이트됩니다:

     {
         '6': {
             questTitle: '질문 1',
             questDesc: '질문 1 설명',
             questIdx: '6',
             questType: 'S',
             answers: [
                 { selIdx: '1', answerTitle: '가', answerWeight: 1, answerOrderNo: 1 }
             ]
         }
     }

2. 두 번째 요소 처리 (cur = { questIdx: '6', ... }):
   • questIdx = '6'이 acc에 존재하므로, 기존 객체를 사용합니다.
   • answers 배열에 답변 정보를 추가합니다.
   • acc는 다음과 같이 업데이트됩니다:

     {
         '6': {
             questTitle: '질문 1',
             questDesc: '질문 1 설명',
             questIdx: '6',
             questType: 'S',
             answers: [
                 { selIdx: '1', answerTitle: '가', answerWeight: 1, answerOrderNo: 1 },
                 { selIdx: '2', answerTitle: '나', answerWeight: 2, answerOrderNo: 2 }
             ]
         }
     }

3. 세 번째 요소 처리 (cur = { questIdx: '7', ... }):
   • questIdx = '7'이 acc에 존재하지 않으므로, 새로운 객체를 초기화합니다.
   • acc는 다음과 같이 업데이트됩니다:

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

4. 네 번째 요소 처리 (cur = { questIdx: '7', ... }):
   • questIdx = '7'이 acc에 존재하므로, 기존 객체를 사용합니다.
   • answers 배열에 답변 정보를 추가합니다.
   • 최종 acc는 다음과 같이 업데이트됩니다:

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

     이렇게 reduce 함수를 사용하여 surveyData 배열을 questIdx 값을 기준으로 그룹화하고, 각 그룹에 관련된 정보와 답변 리스트를 포함하는 구조로 변환합니다.