[React] canvas ref로 DOM 접근 관련 짧은 설명.

 

 

 

 

 

 

 

React는 기존 html&javascript에서 주로 사용 했던 ElementById()와 같은 DOM에 직접적으로 접근하는 방법을

ref를 이용해서 한다.

 

canvas 역시 객체를 랜더링 하려면 DOM에 접근을 해야한다.

그래서 아래와 같이 사용하면 된다.

 

 

 

...


	const objCanvas = this.m_objCanvas;
	if (objCanvas === null) {
		return;
	}
	
    // canvas 접근
	const wScreen = objCanvas.clientWidth;	
	const hScreen = objCanvas.clientHeight;

	const ctx = objCanvas.getContext('2d');
    
    
    ...
    
    
	<canvas ref={ (ref) => {this.m_objCanvas = ref} } style={stylePreview} width="500px" height="400px" />;
    
...

 

 

 

 

 

 

 

 

 

 

 

 

 

자세한 글

tech.osci.kr/2019/10/10/82068584/

backback.tistory.com/295