CSV(쉼표로 구분된 값) 파일은 쉼표를 사용하여 값을 구분하는 구분된 텍스트 파일입니다. 파일의 각 행은 데이터 레코드입니다. 각 레코드는 쉼표로 구분된 하나 이상의 필드로 구성됩니다. 필드 구분 기호로 쉼표를 사용하는 것이 이 파일 형식의 이름 소스입니다. CSV 파일은 일반적으로 표 형식 데이터(숫자 및 텍스트)를 일반 텍스트로 저장하며, 이 경우 각 줄에는 동일한 수의 필드가 있습니다. Wiki
이 기사에서는 반응 애플리케이션에서 CSV 파일을 읽고자 하며 이를 위해 Papa Parse 패키지를 사용합니다. Papa Parse는 가장 빠른 JavaScript용 브라우저 내 CSV(또는 구분된 텍스트) 파서입니다.
먼저, 패키지를 설치해야 합니다.

npm install papaparse

이 프로젝트가 TypeScript로 생성되는 동안 TypeScript 패키지를 설치해야 합니다.

npm install @types/papaparse –-save-dev

CSV 파일인 반응 앱의 CSV 파일에 대한 한 가지 중요한 사항은 공용 디렉터리에 복사해야 합니다.



그런 다음 Papa Parse를 가져와야 합니다.

import Papa, { ParseResult } from "papaparse"

ParseResult는 결과에 대한 papaparse 유형입니다.
그런 다음 데이터 유형을 정의합니다.

type Data = {
  name: string
  family: string
  email: string
  date: string
  job: string
}

type Values = {
  data: Data[]
}

그런 다음 상태를 만듭니다.

const [values, setValues] = React.useState<Values | undefined>()

Papa Parse 패키지로 csv 파일을 가져오는 함수를 만듭니다.

const getCSV = () => {
    Papa.parse("/file.csv", {
      header: true,
      download: true,
      skipEmptyLines: true,
      delimiter: ",",
      complete: (results: ParseResult<Data>) => {
        setValues(results)
      },
    })
  }

useEffect 후크에 넣습니다.

 React.useEffect(() => {
    getCSV()
  }, [])

그게 다야. 그러나 재사용성과 관심사 분리를 위해 사용자 지정 후크를 만들 수 있습니다.

결론

CSV 파일을 읽고 애플리케이션으로 가져오는 것은 어려운 일입니다. 이 기사에서는 Papa Parse를 사용합니다. 이것은 js 애플리케이션에서 CSV 파일 가져오기, 읽기 등을 위한 훌륭한 패키지입니다. 이 패키지에 대한 자세한 내용은 블로그Papa Parse를 참조하십시오.