JavaScript의 맵 함수를 활용하여 데이터 변환과 React 컴포넌트로 활용하기

박영광·2024년 2월 28일

React

목록 보기

13/23

소개

이번 글에서는 JavaScript의 맵 함수를 사용하여 예시 데이터를 변환하고, React 컴포넌트를 통해 시각적으로 표현하는 방법을 알아보겠습니다. 간단한 예시를 통해 데이터를 다루는 과정을 자세히 설명할 것입니다.

본론

1. 예시 데이터

예시 데이터는 팀 구성원의 정보를 담은 JSON 배열로 제공됩니다. 각 객체는 팀명, 구성원 명단, 직급, 그리고 날짜 정보를 포함합니다.
teamData.json이라 명명하겠습니다.

[
  {
    "id": 1,
    "team": "팀1",
    "teamMembers": ["김철수", "이영희", "박민수"],
    "memberRoles": ["팀장", "부팀장", "팀원"],
    "date": "2023-09-01"
  },
  {
    "id": 2,
    "team": "팀2",
    "teamMembers": ["최영진", "정미영", "이성우"],
    "memberRoles": ["팀장", "부팀장", "팀원"],
    "date": "2023-09-01"
  }
]

2. 데이터 변환과 맵 함수 활용

JavaScript의 맵 함수를 사용하여 데이터를 변환합니다. 각 객체를 돌면서 팀 구성원의 정보를 팀명, 구성원과 직급으로 묶어 변환합니다.

// 데이터 변환 및 맵 함수 활용
const transformedTeamData = teamData.map((item) => ({
  id: item.id,
  team: item.team,
  transformedText: item.memberRoles.map((role, index) => `${role} ${item.teamMembers[index]}`).join(", "),
  date: item.date
}));

3. React 컴포넌트 구성

React를 활용하여 데이터를 시각적으로 표현하기 위해 테이블 형태의 컴포넌트를 구성합니다. 각각의 행은 팀명, 구성원과 직급, 그리고 날짜 정보를 표시합니다.

// React 컴포넌트 구성
const TeamMemberTable = ({ data }) => (
  <table>
    <thead>
      <tr>
        <th>팀</th> {/* 팀명을 표시하는 열 */}
        <th>구성원 및 직급</th> {/* 팀 구성원과 그들의 직급을 표시하는 열 */}
        <th>날짜</th> {/* 날짜 정보를 표시하는 열 */}
      </tr>
    </thead>
    <tbody>
      {data.map((item) => (
        <tr key={item.id}>
          <td>{item.team}</td> {/* 팀명을 표시 */}
          <td>{item.transformedText}</td> {/* 팀 구성원과 직급을 표시 */}
          <td>{item.date}</td> {/* 날짜를 표시 */}
        </tr>
      ))}
    </tbody>
  </table>
);

4. 데이터 시각화와 화면 출력

React 컴포넌트를 활용하여 데이터를 화면에 출력합니다. 각 팀 구성원과 그들의 직급을 테이블 형태로 표시하여 사용자가 쉽게 정보를 확인할 수 있습니다.

// 데이터 시각화 및 화면 출력
<TeamMemberTable data={transformedTeamData} />

위 코드는 TeamMemberTable 컴포넌트를 통해 데이터를 시각화하고 화면에 출력합니다. transformedTeamData 배열에 담긴 데이터를 표로 나타내어 사용자가 정보를 쉽게 확인할 수 있도록 합니다.

5. 부모 컴포넌트에서 활용 및 최종 정리

ParentComponent에서 활용한 데이터인 teamData.json JSON 파일을 import하여 사용합니다.

import React from 'react';
import TeamMemberTable from './TeamMemberTable'; // TeamMemberTable 컴포넌트를 import
import teamData from './teamData.json'; // teamData.json 파일을 import

const ParentComponent = () => {
  return (
    <div>
      {/* TeamMemberTable 컴포넌트를 사용하고 데이터를 props로 전달 */}
      <TeamMemberTable data={teamData} />
    </div>
  );
}

export default ParentComponent;