[TypeScript] The left-hand side of an assignment expression may not be an optional property access 에러 해결

[에러가 나왔던 상황]

vue3 + typeScript에서

<video>태그에 ref로 속성에 접근해서 (ref = "video")

    const onClickVideoPopupClose = () => {
      video.value?.currentTime = 0;
    };

위와 같은 코드로 비디오 화면을 닫으면 재생 시점을 맨처음으로 돌아갈 수 있게 코드를 작성했는데

위와 같은 에러가 발생함.

 

 

[에러가 나온 원인]

video.value? 로 나올 수 있는 값이 video 속성값 또는 video 속성 값이 없으면 에러가 발생하지않고 undefinde가 출력 되기 때문에 결국 ' undefined = 0 ' 이렇게 할당하고 있는 꼴이 되기 때문에 에러가 발생

블로그 참고 : https://yoo11052.tistory.com/168

[JavaScript] 옵셔널 체이닝

 

---

[해결방법]

    const onClickVideoPopupClose = () => {
      if (video.value?.currentTime) {
        video.value.currentTime = 0;
      }
    };

 

조건문으로 video.vaule?.currentTime에 값이 있으면  video.vaule.currentTime에 값을 할당 하게 변경하여 해결하였습니다.