week2 tech

react와 canvas

작성자: 함형규, 조영도

하려고 했던 것

react 컴포넌트에서 canvas 태그를 이용해서 커다란 필드를 하나 만들고, 그 위에 캐릭터들을 보여줄 수 있게 하자!

첫번째 산

• canvas에 이미지를 표시하려면, canvas DOM의 context를 만들고 context를 이용해서 drawImage 함수를 불러주어야 한다.
• 그런데 react는 컴포넌트로 관리되기 때문에, DOM 조작을 피해야 한다.
• ref로 해결!

react에서 직접적인 DOM 조작이 불가피할 경우, ref를 사용한다.
html의 id처럼, react 내부에서 ref를 사용해서 DOM에 이름을 만들 수 있다.
ref의 사용법에는 여러가지가 있는데, DOM 요소 혹은 클래스 컴포넌트를 참조하는 한 함수형 컴포넌트 내부에서 ref 속성을 사용할 수 있다.

• 컴포넌트 내부에서 ref를 만든 후 DOM에 ref를 설정해주면, 컴포넌트 내부에서 ref.current로 접근할 수 있다. 단, 컴포넌트가 로드된 후 DOM을 가져와야 하므로 useEffect 함수를 이용하면 좋다.

두번째 산

• cavas 태그에 width/height를 css로 적용하고, drawImage로 캐릭터를 표시하자 캐릭터가 의도했던 사이즈와 전혀 다르게 표시되는 문제가 생겼다. ...?

• html 속성으로 해결

css로 캔버스의 너비와 높이를 조정하면, 실제 캔버스가 늘어나거나 압축되어 내용이 확대/축소 된다.
대신 이전 HTML 너비 및 높이 속성을 사용하면 된다.

비율이 맞게 조정되었다.

세번째 산

• 캐릭터 이미지가 가끔씩 아예 표시되지 않는 문제가 발생했다.
• canvas context의 drawImage 함수가 image가 로드되기 전에 실행될 경우, 그릴 image가 없기 때문에 표시되지 않았던 것이었다.
• onload로 해결

drawImage 함수 호출을 해당 image의 onload함수의 콜백함수로 주면, image가 로드된 후에 draw를 하기때문에 항상 이미지가 표시된다.