[React] 파일 업로드 버튼 만들기

오늘은 React를 사용하여 파일 업로드 버튼을 만들어보겠습니다. 파일 업로드 버튼을 클릭하면 파일 선택 대화 상자가 열리고 선택한 파일의 정보를 콘솔에 출력합니다.

먼저 React 앱을 구성합니다. 아래는 기본적인 앱 구성입니다.

const App = (props) => {
  // 파일 입력 요소에 대한 ref 생성
  const fileInput = React.useRef(null);

  // 파일 업로드 버튼 클릭 시 파일 입력 요소 클릭 이벤트 발생
  const handleButtonClick = (e) => {
    fileInput.current.click();
  };

  // 파일 입력 요소의 값이 변경되면 호출되는 함수
  const handleChange = (e) => {
    // 선택한 파일 정보를 콘솔에 출력
    console.log(e.target.files[0]);
  };

  return (
    <React.Fragment>
      {/* 파일 업로드 버튼 */}
      <Button onClick={handleButtonClick}>파일 업로드</Button>

      {/* 실제 파일 입력 요소 */}
      <input
        type="file"
        ref={fileInput}
        onChange={handleChange}
        style={{ display: "none" }}
      />
    </React.Fragment>
  );
}

코드 설명

'fileInput` Ref 생성
- `const fileInput = React.useRef(null);`: `fileInput`은 파일 입력 요소를 가리키는 React ref입니다. 이를 통해 JavaScript에서 파일 입력 요소를 제어할 수 있습니다.

`handleButtonClick` 함수
- `const handleButtonClick = (e) => { ... }`: 파일 업로드 버튼을 클릭하면 호출되는 함수입니다.
- `fileInput.current.click();`: 이 코드는 파일 입력 요소를 클릭한 것과 동일한 효과를 가지며, 파일 선택 대화 상자를 엽니다.

`handleChange` 함수
- `const handleChange = (e) => { ... }`: 파일 입력 요소의 값이 변경될 때 호출되는 함수입니다.
- `console.log(e.target.files[0]);`: 선택한 파일의 정보를 콘솔에 출력합니다.

화면 구성
- 파일 업로드 버튼은 `Button` 컴포넌트로 만들어져 있습니다. 이 버튼을 클릭하면 파일 입력 요소가 클릭됩니다.
- 파일 입력 요소 (`input` 요소)는 `style` 속성을 통해 화면에 표시되지 않도록 숨겨져 있습니다.

결과
위의 코드를 실행하면 "파일 업로드" 버튼을 클릭하면 파일 선택 대화 상자가 열리고 선택한 파일 정보가 콘솔에 출력됩니다.

파일 업로드 기능을 더 발전시키고, UI를 개선하거나 서버와 연동하여 파일 업로드를 구현할 수 있습니다.