[태그:] object

JavaScript로 복잡한 데이터 구조 다루기: List와 Object 데이터 추출 전략 💡

데이터 리스트를 활용하는 방법은 다양하며, 그만큼 잊어버리기 쉬움.
이 글에서는 List 안에 List 안에 Object 형태의 복잡한 데이터를 추출하는 전략을 다룸

---

📚 데이터 구조 이해

다음과 같은 JSON 형태의 데이터 구조를 예시로 들겠음.
이는 여러 카테고리를 포함하고, 각 카테고리 안에 질문과 답변 객체 리스트를 가지고 있음

[
  "1번 카테고리 ": [
    {
      "id": 1,
      "question": "질문1",
      "answer": "답1"
    },
    {
      "id": 2,
      "question": "질문2",
      "answer": "답2"
    }
  ],
  "2번카테고리": [
    {
      "id": 3,
      "question": "질문3",
      "answer": "답3"
    },
    {
      "id": 4,
      "question": "질문4",
      "answer": "답4"
    }
  ],
  "7번카테고리": [
    {
      "id": 25,
      "question": "질문26",
      "answer": "답26"
    },
    {
      "id": 26,
      "question": "질문27",
      "answer": "답27"
    }
  ]
]

위 데이터에서 각 카테고리별 질문과 답변을 추출하는 것이 목표임.

🔑 카테고리 키 추출하기

먼저 데이터를 dataList 변수에 담음.
카테고리 이름을 키로 사용하고 있으므로, Object.keys()와 map()을 활용하여 키를 추출할 수 있음

const nameList = Object.keys(dataList[0]).map((data) => (
  <span
    key={data}
    style={{
      display: "inline-block",
      fontSize: "1.5rem",
      fontWeight: "bold",
      padding: "0.25rem 0",
    }}
  >
    {data}
  </span>
));

하지만 위 코드를 바로 실행하면 오류가 발생할 수 있다
React 환경에서 첫 렌더링 시 dataList가 undefined로 나올 때가 있어 map() 함수를 실행할 수 없다는 오류가 발생함
이를 해결하기 위해 if 문을 사용하여 dataList가 정의되었는지 확인하는 조건문을 추가했음

const nameList = dataList !== undefined ? Object.keys(dataList).map((key, index) => <div key={index}></div>) : null; // 예시 코드, 실제 구현은 위 span 태그를 활용

결과값: ["1번카테고리", "2번카테고리", ..., "7번카테고리"] 형태로 카테고리 키들이 추출됨

---

📝 질문과 답변 데이터 추출하기

카테고리 키를 추출한 후, 이제 해당 키의 값을 찾아 질문과 답변 데이터를 추출해야 함
Object.values()와 중첩된 map()을 사용하면 가능함

const dataDetail = Object.values(dataList[0]).map((data) =>
  data.map((data2) => (
    <div key={data2.id}>
      <p>
        {data2.question} / {data2.answer}
      </p>
    </div>
  ))
);

이 코드는 dataList의 값(즉, 각 카테고리의 리스트)을 순회하고,
각 리스트 내부의 객체(data2)에서 question과 answer 속성을 추출함.

결과값:
["질문1", "답1","질문2","답2"]
["질문3", "답3","질문4","답4"]
["질문26", "답26","질문27","답27"]
와 같이 각 카테고리별 질문과 답변 데이터가 추출됨.