리액트로 캔버스 활용하는것에 대해 질문드립니다.

[곽신우]

안녕하세요 웹개발 프리패스로 얼마전에 완강한 수강생입니다.

취업을 하고자 포트폴리오를 만듦에 있어 좀 더 인터랙티브하게 만들고자 canvas를 혼자 열심히 공부해서 

이제 써먹어 보려고하는데

이게그냥 html js로만 쓰면 문제가 안되는데 react환경에서 사용하고자하니 여러가지 문제가 생겨서

답답한 마음에 질문 올려봅니다.

사실 지금 문제가 있는부분은 canvas활용의 문제라기보다는

제가아직 react에 대한 전반적인 지식이 아직 부족해서

그런거같기는 합니다만 


 우선 코드는 위와 같습니다.

우선 useEffect와 useRef를 쓰는 부분을 제외하고는 동일하게 코드를 짯을 경우 그냥 html js 환경에서는
mapleImg.onload 함수에있는 console.log가 정상적으로 출력되며 array도 10개의 데이터가 들어가게됩니다.

하지만 지금 react환경에서는 콘솔창에서 log가 출력이 되지않습니다.

출력이 되지않는것 뿐만이 아닌 Array에 아무런 데이터가 추가되지 않는것처럼 보여집니다. 

이게 react에서의 렌더링 순서가 문제인건지

문법이 문제인건지 어떤게 문제인건지 어디다 질문할곳이 없어서 

제가 처음 코딩을 공부한것이 이곳이였기에 도움을 구하고자 질문 올립니다  ㅠㅠ..

[codingapple]

useEffect안의 코드가 실행되는지 크롬콘솔창엔 뭐 안뜨는지 확인합시다

[곽신우]

useEffect안에 나머지코드는 코드는 실행이 되는데 mapleImg.onload 이하 코드가 실행이 되지않는것처럼 
보입니다. 콘솔창에 아무것도 출력되지않습니다.

[codingapple]

그럼 이미지경로가 잘못되었거나 그래서 onload가 실행안되는듯요
public폴더에 있는 이미지를 써봅시다

[글쓴이]

글