ReactJs로 이미지 파일 미리보기.

소개

ReactJs 애플리케이션에서 업로드된 이미지 파일을 미리 보는 방법이 왜 어려운지 궁금하셨습니까? ReactJs 학습, 웹 앱 구축에서 효율적이고 지식이 풍부하려면 학습 로드맵을 알고 있는 것이 중요합니다. 그러나 특정 작업에 몰두하고, 새로운 도전에 직면하고, 새로운 것을 발견하는 것은 소프트웨어 개발이 수반하는 것이기 때문에 정상입니다.

이미지 파일 미리보기가 필요한 이유는 무엇입니까?
물론 사용자 경험에 대해 이야기할 때 소프트웨어 개발자 및 프런트 엔드 엔지니어로서 사용자를 최우선으로 두고 애플리케이션 사용이 원활하고 설득력 있게 사용되는지 확인하는 것이 바람직하고 상식입니다.

이미지 업로드를 위한 React 양식 사용

HTML5의 일반적인 지식에서 양식 입력 요소는 텍스트, 숫자, 색상, 파일 등을 포함하는 사용자의 다양한 데이터 또는 정보를 가져오는 데 사용할 수 있습니다.

기본 양식 요소는 다음과 같습니다.

<input type='text' />

따라서 기본적으로 입력 요소의 type 속성은 사용자로부터 수신할 정보의 종류를 결정합니다. 이와 관련하여 이미지가 파일의 예이기 때문에 사용자로부터 입력 유형의 파일을 수신하게 됩니다.

<input type='file' />

이것을 이해한 후에, 우리는 ReactJs 부분에 뛰어들고 싶습니다. React 양식의 구문은 HTML5 및 Vanilla Javascript와 매우 유사하지만 입력 값을 수집하는 것은 약간 다릅니다. ReactJs에서 입력 값을 수집하려면 useState라는 React 후크 중 하나를 사용해야 합니다.

import React, { useState } from 'react'

function App() {

  const [image, setImage] = useState({})
  return (
    <div className="App">
        <input type='file' onChange={(e) => setImage(e.target.files)} />
    </div>
  );
}

위의 코드를 보면 첫 번째 줄은 React 후크 'useState'의 가져오기를 보여줍니다. 또한 애플리케이션의 jsx 측면을 반환하는 앱 기능 기반 구성 요소의 선언이 있습니다.

상태 변수

위에 표시된 것처럼 useState 후크는 응용 프로그램의 입력 요소에서 이미지 파일을 수집하고 예약하는 상태 변수를 만드는 데 사용되었습니다.

선언

const [image, setImage] = useState({})

<input type='file' onChange={(e) => setImage(e.target.files)} />

사용자 측면에서 이미지를 추가하면 선택한 파일이 애플리케이션에서 렌더링될 이미지 상태 내에 저장됩니다.

이미지 미리보기

이미지 파일을 이미지 상태로 저장한 후 애플리케이션의 img 요소를 사용하여 이미지를 미리 보고 이미지 콘텐츠를 보고 싶습니다.

import React, { useState } from 'react'

function App() {

  const [image, setImage] = useState({})

  return (
    <div className="App">
        <input type='file' onChange={(e) => setImage(e.target.files)} />
        {
          image && image.length > 0 ?
            <img 
              src={URL.createObjectURL(image[0])}
              alt='Alternate text'
              width={300}
            />
            : null        
        }
    </div>
  );
}

위의 코드를 확인하면서 img 소스의 값을 이미지 상태로 설정하고 객체 URL을 읽어서 파일을 소스 속성으로 해석하여 이미지 요소를 렌더링하고 이미지 파일도 읽었습니다.

아래에서 볼 수 있듯이 이미지 상태는 Array 데이터 유형이고 이미지 Array의 첫 번째 요소는 URL.createObjectURL() 함수에 대한 인수로 전달되었습니다.

<img 
    src={URL.createObjectURL(image[0])}
    alt='Alternate text'
    width={300}
/>

그 전에는 조건부 렌더링을 수행하여 이미지가 이미 선택되어 있고 이미지 상태에 있는지 확인했습니다. 왜냐하면 URL.createObjectURL() 함수는 이미지가 아직 선택되지 않은 상태에서 컴파일 오류가 발생하고 렌더링/만 하려고 하기 때문입니다. 선택한 경우에만 이미지를 표시합니다.

결론
읽어 주셔서 감사합니다. 이 기사에서는 업로드된 이미지 파일을 ReactJs로 미리 보는 방법에 대한 기본적인 아이디어를 얻습니다. 이것은 업로드된 이미지 파일을 미리 보는 간단하고 효과적인 방법이었습니다. 기사가 마음에 드셨다면 좋아요, 구독, 그리고 더 많은 기사를 확인하세요.

여기에서 위의 코드를 테스트할 수 있습니다! -