HOWTO · React
React에서 CSV 파일 업로드 및 읽기
이 기사에서는 React에서 CSV 파일을 읽는 방법을 소개합니다.
이 페이지의 내용
React 앱에서 선택한 CSV 파일을 읽으려면 파일 입력 요소를 사용하고 onChange 핸들러에서 해당 File 객체를 읽습니다. 브라우저의 FileReader API는 파일을 텍스트로 읽지만, CSV 텍스트를 행과 열로 변환하지는 않습니다. CSV 구조를 처리해 행 데이터를 반환하는 파서가 필요하면 papaparse를 사용하세요.
FileReader를 사용해 React에서 CSV 파일 읽기
.csv 파일을 받는 기본 파일 입력 요소를 추가한 다음, 선택한 파일을 FileReader.readAsText()에 전달합니다. 읽기는 비동기 작업이므로 onload에서 결과를 처리하세요. 다음 브라우저 페이지 소스 예제는 실행되지 않았으며 파일 텍스트를 표시합니다. 예제에서 화면에 표시되는 파일 입력 레이블은 영어로 유지됩니다. React 컴포넌트에서는 같은 입력 요소를 JSX에 넣고 textContent를 직접 설정하는 대신 onload 핸들러에서 컴포넌트 상태를 업데이트하세요.
이 Node.js 예제는 간단한 CSV 텍스트를 행 객체로 바꾸는 방법을 보여 줍니다. 필드는 따옴표로 묶이지 않고 모든 행의 열 구성이 같다고 가정합니다. 일반적인 CSV 문법을 사용하는 파일에는 CSV 파서를 사용하세요.
const csv = "name,score\nAva,18\nNoah,21";
const [headerLine, ...dataLines] = csv.trim().split(/\r?\n/);
const headers = headerLine.split(",");
const rows = dataLines.map((line) => {
const values = line.split(",");
return Object.fromEntries(headers.map((header, index) => [header, values[index]]));
});
console.log(JSON.stringify(rows, null, 2));
[
{
"name": "Ava",
"score": "18"
},
{
"name": "Noah",
"score": "21"
}
]
<label for="csv-file">Choose a CSV file</label>
<input id="csv-file" type="file" accept=".csv,text/csv">
<pre id="csv-text"></pre>
<script>
const input = document.querySelector("#csv-file");
const output = document.querySelector("#csv-text");
input.addEventListener("change", (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
output.textContent = String(reader.result);
};
reader.onerror = () => {
output.textContent = "The file could not be read.";
};
reader.readAsText(file);
});
</script>
React에서는 reader.onload 안에서 입력 핸들러가 setCsvText(String(reader.result))를 호출한 뒤 해당 상태를 <pre>에 표시할 수 있습니다. 이 예제는 선택한 파일을 텍스트로만 읽습니다. 행, 헤더, 따옴표로 묶인 값 또는 구분자를 CSV 데이터로 해석하려면 파일 텍스트를 CSV 파서에 전달하거나 파싱 라이브러리를 직접 사용하세요.
papaparse 라이브러리를 사용해 React에서 CSV 파일 읽기
React 프로젝트 디렉터리에서 npm install papaparse로 Papa Parse를 설치한 다음 import Papa from "papaparse"로 가져옵니다. 기본 파일 입력 요소를 사용해 선택한 File을 Papa.parse에 전달하세요. complete 콜백은 파싱된 행이 data 속성에 담긴 결과를 받습니다. 컴포넌트 상태를 사용해 해당 행을 표시하고, 파싱 관련 피드백을 보여 주려면 errors를 확인하세요. 이 브라우저 페이지 소스 예제는 실행되지 않았으며 Papa Parse가 전역 Papa로 제공된다고 가정합니다. React 컴포넌트에서는 위의 모듈 가져오기를 사용하고 콜백 로직을 onChange에 넣으세요. 이 예제는 DOM에 결과를 표시하며 React 렌더링을 보여 주지는 않습니다. 예제에서 화면에 표시되는 파일 입력 레이블은 영어로 유지됩니다.
<label for="csv-file">Choose a CSV file</label>
<input id="csv-file" type="file" accept=".csv,text/csv">
<pre id="csv-rows"></pre>
<script>
const input = document.querySelector("#csv-file");
const output = document.querySelector("#csv-rows");
input.addEventListener("change", (event) => {
const file = event.target.files[0];
if (!file) return;
Papa.parse(file, {
header: true,
complete: (results) => {
output.textContent = JSON.stringify(results.data, null, 2);
if (results.errors.length > 0) {
console.warn("CSV parsing reported issues:", results.errors);
}
},
error: (error) => {
output.textContent = `The file could not be parsed: ${error.message}`;
}
});
});
</script>
header: true를 설정하면 Papa Parse는 첫 번째 행을 객체 키로 사용하므로 results.data의 각 항목은 열 이름을 키로 가진 데이터 행이 됩니다. React 컴포넌트에서는 complete에서 setRows(results.data)를 호출하고 상태에 저장된 행을 표시하세요. 사용자에게 파싱 경고를 보여 줘야 한다면 인터페이스에 results.errors를 표시합니다. 원본 텍스트가 필요하고 형식 처리를 직접 하려는 경우에는 FileReader가 유용합니다. CSV 내용을 구조화된 행으로 변환하는 작업에는 Papa Parse를 바로 사용할 수 있습니다.
