SetState 비동기 처리 (모달창에 Img 불러올때)

문제

모달창에 열때 이미지 주소를 디비에서 가져와야 한다.

이미지 주소를 가져오는 것보다 모달창 열리는 속도가 빨라서 이미지 없이 모달창 켜진다.

---

 

class Template extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      
      modalVisible: false,
      imgUrl:''
    };
  }

함수

 toggleModal(rowData) {
  if(  this.state.modalVisible === true )
  {
  this.setState({ modalVisible: false });
} else{
  this.setState({ imgUrl : `/static${rowData.cont_val}` },()=>{
  this.setState({ modalVisible: true });
  });

}


}

setState를 비동기 처리해줬다.

<>  
          <Button
           onClick={  () => {
       }
    }

            style={{ backgroundColor: "#6c757d", color: "white" }}
            >
            사진
        </Button>
              <Modal className='screenModal'  bodyStyle={{padding:'0px', 
              fontSize: '24px', 
              margin:'0px' ,boxSizing: 'border-box',
              }} width={'10vmin'} closable={false} visible={this.state.modalVisible}  onCancel={()=> this.toggleModal(rowData)} footer={null}   >
                <div style={{backgroundColor:'#1C2E5A', paddingLeft:'20px',paddingTop:'10px',color:'white',width:"600px",height:"55px" , boxSizing:'border-box',margin:'0px'}}>  사진</div>
                <img src={this.state.imgUrl} className='screen'   style={{width:"600px", boxSizing: 'border-box'}} />
                    </Modal>
  </>