⚡ 문제
- Canvas api 사용 도중, 나는 분명 null 에러를 방지하기 위해 useEffect문 처음에
if (!canvas) return;if (!ctx) return;를 통해 검증을 했는데도 에러가 났다.
⭐ 원인
ctx와 canvas 변수에 대한 에러는 JavaScript 클래스 내부에서 '클래스 외부에 정의된 변수'에 접근할 때 발생하는 스코프 문제 때문이었다.
< 오류 원인 분석 >
useEffect 내부에서 const ctx = canvas.getContext("2d");처럼 선언된 ctx는 useEffect 함수 블록 안에서만 유효한 지역 변수이다.
하지만 Particle 클래스의 draw()나 update() 함수는 ctx.beginPath()처럼 이 지역 변수 ctx를 사용하려고 한다.
=> 오류 발생!
☄️ 해결
- Particle 클래스를 useEffect 함수 밖으로 꺼내고 ctx와 canvas를 함수의 인자로 받는 방식으로 구현한다.
< 다른 방법 >
-
ctx와 canvas 뒤에 !를 붙인다.
-
!는 TypeScript에서 사용하는 논널 어설션 연산자이다.
=> 이 !는 "나는 개발자로서 확신한다! 이 값은 절대 null이나 undefined가 아닐 것이다! 그러니 TypeScript 너는 경고하지 마라!"라고 TypeScript에게 선언하는 것이다.
⚠️ 사용 시 주의점
! 연산자는 TypeScript의 에러를 잠재우는 가장 쉬운 방법이지만, 남용해서는 안된다.
만약 개발자의 확신이 틀려서 실제로 null이 들어온다면, TypeScript는 에러를 못 잡고 코드가 실행되어 런타임 시점(웹사이트 실행 중)에 웹사이트가 멈추는 상황이 발생할 수 있다.
=> 따라서 혹시 모를 에러를 방지하기 위해 처음 해결방식으로 해결했다.
