React | 이미지 업로드 후 미리보기 (on Change / image preview)

 

 

 

1. constructor(생성자)를 이용해 state 생성

 

file은 input type='file'에 들어온 파일 값을 넣고, URL은 이미지 미리보기(preview)를 보여주기 위한 값입니다.

URL은 img태그의 src값에 들어감

 constructor(props) {
    super(props);
    this.state = {
      file : '',
      previewURL : ''
    }
  }

 

 

 

2. 파일 첨부를 위한 input 태그 생성

 

onChange함수는 input태그에 입력된 값이 변경될 때 마다 실행되는 함수로, handleFileOnChange라는 메서드가 호출되도록 해주었습니다.

<div>
  <input type='file' 
      accept='image/jpg,impge/png,image/jpeg,image/gif' 
      name='profile_img' 
      onChange={this.handleFileOnChange}>
  </input>
</div>

 

 

 

3. onChange에서 호출 될 함수 작성하기(handleFileOnChange)

 

파일을 한 개만 입력받는 경우이기 때문에 files[0]으로 접근해야 업로드한 파일값을 얻어올 수 있습니다.

FileReader API를 사용하기 위해 생성자로 선언해준 뒤, result값에 접근합니다.

FileReader.result는 파일 업로드 작업이 완료된 후 실행되며 파일의 컨텐츠에 접근할 수 있습니다.

 

reader.onloadend가 바로 파일 업로드 작업이 끝났을 때 실행되도록 해줍니다.

handleFileOnChange = (event) => {
    event.preventDefault();
    let reader = new FileReader();
    let file = event.target.files[0];
    reader.onloadend = () => {
      this.setState({
        file : file,
        previewURL : reader.result
      })
    }
    reader.readAsDataURL(file);
  }

 

 

 

4. if문을 활용한 조건부 렌더링으로 엘리먼트 생성되게 하기

 

handleFileOnChange메서드를 통해 state값이 변경되었기 때문에 해당 컴포넌트는 리렌더링이 됩니다.

렌더링이 되기 전, state값이 초기값('')이 아니라면 profile_preview라는 변수에 img태그를 작성한 값이 대입됩니다.

 render() {
    let profile_preview = null;
    if(this.state.file !== ''){
      profile_preview = <img className='profile_preview' src={this.state.previewURL}></img>
    }

    return(
    <div>
      <input type='file' 
          accept='image/jpg,impge/png,image/jpeg,image/gif' 
          name='profile_img' 
          onChange={this.handleFileOnChange}>
      </input>
      {profile_preview}
    </div>
    ) 
 }

 

 

 

 

 

실행결과

 

 

 

 

+) FileReader

FileReader