[Typescript] e.touches[0].clientX undefined 해결

 

 

현재 구현하고 있었던 기능이 

 

Next.js에서  터치 이벤트 발생 시 옆으로 스와이프되는 기능을 구현하고 있었다. 

 

 

 

에러 발생 내용 

 

 

e.touches[0]에서 개체가 'undefined' 인 것 같다는 에러가 발생...

 

근데 작동은 잘됨.

 

 

    // 스와이프 관련 핸들러 -> 터치 종료 지점
    const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>): void => {
        if (e.touches && e.touches.length > 0) {
            touchEndX.current = e.touches[0].clientX;
        }
    };

 

 

에러 해결 방법 

 

널 병합 연산자를 사용해서 해결했다. 

 

    // 스와이프 관련 핸들러 -> 터치 종료 지점
    const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>): void => {
        const clientX = e.touches?.[0]?.clientX ?? 0; // touches가 없으면 0으로 설정
        touchStartX.current = clientX;
    };

 

 

에러 발생 이유

 

1. 타입스크립트의 e.touches 가 항상 존재한다고 가정하지 않는다.

즉, 이벤트가 제대로 발생하지 않았거나 예상하지 못한 상황에서 touche가 undefined가 될 가능성을 고려함

 

-> 이로 인해 타입스크립트는 e.touches[0]에 직접 접근할 때 undefined 가능성을 경고함 

 

 

2. 널 병합 연산자의 역할 

 

널 병합 연산자는

e.touches?.[0]?.clientX ?? 0  와 같은 방식으로 사용됨

 

이 표현은 다음을 의미한다.

 

e.touches가 undefined가 아닌지 확인하고, 아니라면 첫 번째 터치 이벤트의 ClientX에 접근한다.

 

e.touches가 undefined라면 ?? 0 에 의해 기본값 0 할당됨

 

이를 통해 타입스크립트가 안전하게 clientX 값을 가져올 수 있도록 보장하고, 경고를 제거할 수 있습니다.

 

 

 

 

---

https://i-ten.tistory.com/232

[Javascript] 널 병합연산자 '??'와 옵셔널 체이닝 '?.'