파일 업로드는 웹 애플리케이션에서 매우 중요한 기능 중 하나입니다. 이번 블로그 포스트에서는 자바스크립트와 React.js를 사용하여 파일 업로드 애플리케이션을 구현하는 방법에 대해 알아보겠습니다.
1. 환경 설정
먼저, React.js 프로젝트를 생성하고 필요한 환경을 설정해야 합니다. 아래의 명령어를 사용하여 새로운 React.js 프로젝트를 생성합니다.
$ npx create-react-app file-upload-app
프로젝트 폴더로 이동한 후, 필요한 패키지를 설치합니다.
$ cd file-upload-app
$ npm install axios react-dropzone
2. 파일 업로드 컴포넌트 구현
파일 업로드를 위한 컴포넌트인 FileUpload를 구현해봅시다. src 폴더 내에 FileUpload.js 파일을 생성하고 아래의 내용을 추가합니다.
import React, { useState } from 'react';
import axios from 'axios';
import Dropzone from 'react-dropzone';
const FileUpload = () => {
const [selectedFile, setSelectedFile] = useState(null);
const handleFileUpload = async () => {
try {
const formData = new FormData();
formData.append('file', selectedFile);
const response = await axios.post('/upload', formData);
console.log(response.data);
} catch (error) {
console.error(error);
}
};
return (
<div>
<Dropzone onDrop={acceptedFiles => setSelectedFile(acceptedFiles[0])}>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>파일을 드래그하거나 클릭하여 업로드하세요.</p>
</div>
)}
</Dropzone>
{selectedFile && (
<div>
<p>선택된 파일: {selectedFile.name}</p>
<button onClick={handleFileUpload}>업로드</button>
</div>
)}
</div>
);
};
export default FileUpload;
FileUpload 컴포넌트는 selectedFile라는 상태를 가지며, 이를 통해 사용자가 선택한 파일을 추적합니다. handleFileUpload 함수는 선택된 파일을 FormData에 담아 서버로 전송하고, 서버의 응답을 콘솔에 출력합니다.
또한, Dropzone 컴포넌트를 사용하여 파일을 업로드하는 기능을 구현했습니다. 사용자가 파일을 드래그하거나 클릭하여 선택할 수 있으며, 선택된 파일의 정보와 ‘업로드’ 버튼을 표시합니다.
3. 애플리케이션에 파일 업로드 컴포넌트 추가
이제 파일 업로드 컴포넌트를 실제로 사용해보겠습니다. src 폴더 내의 App.js 파일을 열고 아래의 내용으로 수정합니다.
import React from 'react';
import FileUpload from './FileUpload';
const App = () => {
return (
<div>
<h1>파일 업로드 애플리케이션</h1>
<FileUpload />
</div>
);
};
export default App;
App 컴포넌트 내에 FileUpload 컴포넌트를 추가하여 사용합니다.
4. 서버 측 구현
이제 파일 업로드를 처리하기 위한 서버 측 구현이 필요합니다. 백엔드 서버에는 Node.js와 Express를 사용하여 구현할 수 있습니다. 이 부분에 대한 자세한 내용은 다른 블로그 포스트에서 다루도록 하겠습니다.
마무리
이렇게 자바스크립트와 React.js를 사용하여 파일 업로드 애플리케이션을 구현하는 방법을 살펴보았습니다. 파일 업로드는 많은 웹 애플리케이션에서 필요한 기능이므로, 이를 구현하는 방법을 익혀두는 것이 유용할 것입니다. 프로젝트를 생성하고 코드를 작성하여 실제로 동작하는 애플리케이션을 만들어보세요!
참고 자료: React Dropzone