Typescript 타입스크립트 에러 Object is possibly 'null'

에러

 useEffect(() => {
    const container = document.querySelector('.container');
	container.addEventListener('scroll', listener);
    return () => {
     container.removeEventListener('scroll', listener);
    };
  });

대충 이런 상황에서 container 변수에 빨간 줄이 뜨면서 object is possibly 'null'이라는 에러가 출력됐다

 

원인

개발하는 입장에서 저 container에 dom이 들어간다고 확신하지만, 타입 스크립트 입장에서는 아닌가 보다,,ㅎ
null값이 들어갈 수도 있다고 판단이 되어 뜨는 오류!

 

해결

옵셔널 체인징을 이용하자!

 useEffect(() => {
    const container = document.querySelector('.container');
	container?.addEventListener('scroll', listener);
    return () => {
     container?.removeEventListener('scroll', listener);
    };
  });

 

변수 container에 값이 있으면 addEventListener를 실행하고 아니면 return 시켜버리는 것과 같다

그 외에 if 문으로 null 값을 return 시켜주는 처리법도 있고 타입을 직접 지정해주는 방법도 있다!
난 옵셔널 체이닝이 가장 간단해서,,ㅎ