React로 CSV 파일을 가져오는 방법

이 가이드에서는 React를 사용하여 사용자로부터 받은 CSV 파일을 가져오는 방법을 배웁니다. 우리의 응용 프로그램은 두 부분으로 구성됩니다. 사용자가 파일을 선택할 수 있는 양식을 만듭니다. 다음으로 이 CSV 파일을 볼 수 있도록 Javascript로 몇 가지 작업을 수행합니다. 우리의 예부터 시작합시다.

예시

먼저 사용자가 CSV 파일을 업로드할 수 있도록 React에서 Form을 생성해 보겠습니다.

function App() {
    return (
        <div style={{ textAlign: "center" }}>
            <h1>REACTJS CSV IMPORT EXAMPLE </h1>
            <form>
                <input type={"file"} accept={".csv"} />
                <button>IMPORT CSV</button>
            </form>
        </div>
    );
}

간단한 양식과 입력 항목을 만들었습니다. 입력 요소의 수락 기능을 사용하여 파일 형식이 CSV만 가능하도록 지정합니다. 이제 FileReader 으로 사용자가 선택한 CSV 파일을 로드하고 읽어봅시다.

import React, { useState } from "react";

function App() {
    const [file, setFile] = useState();

    const fileReader = new FileReader();

    const handleOnChange = (e) => {
        setFile(e.target.files[0]);
    };

    const handleOnSubmit = (e) => {
        e.preventDefault();

        if (file) {
            fileReader.onload = function (event) {
                const csvOutput = event.target.result;
            };

            fileReader.readAsText(file);
        }
    };

    return (
        <div style={{ textAlign: "center" }}>
            <h1>REACTJS CSV IMPORT EXAMPLE </h1>
            <form>
                <input
                    type={"file"}
                    id={"csvFileInput"}
                    accept={".csv"}
                    onChange={handleOnChange}
                />

                <button
                    onClick={(e) => {
                        handleOnSubmit(e);
                    }}
                >
                    IMPORT CSV
                </button>
            </form>
        </div>
    );
}

여기에서 사용자가 선택한 파일이 성공적으로 업로드되면 파일을 처리하고 표시할 수 있습니다. 이제 샘플 CSV 파일을 로드하고 콘솔에서 출력되는 것을 살펴보겠습니다.



보시다시피 이제 선택한 CSV 파일을 읽을 수 있습니다. 일반 텍스트 유형으로 읽는 이 파일을 JavaScript를 사용하여 객체 배열로 변환하고 테이블 요소 안에 배치할 수 있습니다.

function App() {
 import React, { useState } from "react";

function App() {
  const [file, setFile] = useState();
  const [array, setArray] = useState([]);

  const fileReader = new FileReader();

  const handleOnChange = (e) => {
    setFile(e.target.files[0]);
  };

  const csvFileToArray = string => {
    const csvHeader = string.slice(0, string.indexOf("\n")).split(",");
    const csvRows = string.slice(string.indexOf("\n") + 1).split("\n");

    const array = csvRows.map(i => {
      const values = i.split(",");
      const obj = csvHeader.reduce((object, header, index) => {
        object[header] = values[index];
        return object;
      }, {});
      return obj;
    });

    setArray(array);
  };

  const handleOnSubmit = (e) => {
    e.preventDefault();

    if (file) {
      fileReader.onload = function (event) {
        const text = event.target.result;
        csvFileToArray(text);
      };

      fileReader.readAsText(file);
    }
  };

  const headerKeys = Object.keys(Object.assign({}, ...array));

  return (
    <div style={{ textAlign: "center" }}>
      <h1>REACTJS CSV IMPORT EXAMPLE </h1>
      <form>
        <input
          type={"file"}
          id={"csvFileInput"}
          accept={".csv"}
          onChange={handleOnChange}
        />

        <button
          onClick={(e) => {
            handleOnSubmit(e);
          }}
        >
          IMPORT CSV
        </button>
      </form>

      <br />

      <table>
        <thead>
          <tr key={"header"}>
            {headerKeys.map((key) => (
              <th>{key}</th>
            ))}
          </tr>
        </thead>

        <tbody>
          {array.map((item) => (
            <tr key={item.id}>
              {Object.values(item).map((val) => (
                <td>{val}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
....

Javascriptslice 및 split 메서드를 사용하여 일반 텍스트 형식으로 제공되는 CSV 파일의 형식을 지정하고 두 개의 별도 배열을 만들었습니다. 그런 다음 머리글 및 행 배열을 키, 값으로 객체 형식의 배열로 변환했습니다.

Live Codesandbox Example

React 웹 프레임워크를 보고 계십니까?

데이터 집약적인 애플리케이션을 즉시 구축하기 위한 React 기반 프레임워크입니다. 정제는 극단적인 사용자 정의 기능을 손상시키지 않으면서 신속한 개발을 위해 즉시 사용 가능한 많은 기능을 제공합니다. 사용 사례에는 관리자 패널, B2B 애플리케이션 및 대시보드가 ​​포함되지만 이에 국한되지 않습니다.

⚙️ 제로 구성: 슈퍼플레이트로 한 줄 설정. 프로젝트를 시작하는 데 1분도 걸리지 않습니다.

📦 즉시 사용 가능: 라우팅, 네트워킹, 인증, 상태 관리, i18n 및 UI.

🔌 백엔드 불가지론: 모든 맞춤형 백엔드에 연결합니다. REST API, Strapi, NestJs CRUD, Airtable, Supabase, Appwrite 및 Altogic을 기본적으로 지원합니다.

📝 Native Typescript Core: 일반 JavaScript는 언제든지 옵트아웃할 수 있습니다.

🔘 분리된 UI : UI 구성 요소가 캡슐화되지 않고 직접 노출됩니다. UI 요소를 완전히 제어할 수 있습니다.

🐜 강력한 기본 UI: 통합 Ant Design System과 원활하게 작동합니다. (여러 UI 프레임워크에 대한 지원은 로드맵에 있습니다)

📝 상용구 없는 코드: 코드베이스를 깨끗하고 읽기 쉽게 유지합니다.

Refer to the refine documentation for more information. →

Refine으로 CSV 가져오기는 어떻게 하나요?

구체화를 통한 CSV 가져오기는 매우 간단하고 즉시 사용 가능한 기능입니다. 사용 방법은 가이드와 예제에서 단계별로 설명됩니다.

Refer to the refine CSV import guide for more information. →

View Source

CSV 가져오기 사용법 구체화

CSV 파일 가져오기는 Refine에서 제공하는 useImport 후크 및 ImportButton 을 사용하여 간단하고 빠릅니다.

import {
    List,
    Table,
    useTable,
    useImport,
    ImportButton,

} from "@pankod/refine";

export const PostList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    const importProps = useImport<IPostFile>();

    return (
        <List
            pageHeaderProps={{
                extra: <ImportButton {...importProps} />,
            }}
        >
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" />
                <Table.Column dataIndex="status" title="Status" />
            </Table>
        </List>
    );
};

interface IPostFile {
    title: string;
    categoryId: string;
}
interface IPost {
    id: string;
    title: string;
    status: string;
}

삽입 프로세스를 수행하는 동안 batchSize 옵션을 사용하여 데이터를 청크로 나눌 수도 있습니다.

Refer to the refine CSV Import API References for more information. →

Refine CSV Import Live Codesandbox Example