React에서 Input의 Image Preview 구현하기

|

React에서 input 팝업에서 이미지를 가져온 후 미리보기 이미지를 구현하는 법은 다음과 같다.
Image 컴포넌트는 semantic ui react의 것을 사용하였다.

    import { Image } from 'semantic-ui-react'

    <Image src={this.state.imageUrl} size='small' />
    <input 
        type='file' label='Upload' accept='.png' 
            onChange={(event)=>{ 
            this.setState({...this.state, 
            imageUrl: window.URL.createObjectURL(event.target.files[0]),
            });
            }}
        ref={(ref) => this.fileUpload = ref}
    />