[React] typescript useRef 사용시 undefined / null 오류 발생 원인 및 해결 방법

Intro

안녕하세요. 이번 시간에는 react 에서 useRef 사용시 undefined / null 오류 발생 원인과 해결 방법에 대해 알아보도록 하겠습니다. 우선 제가 useRef를 사용한 코드 예제는 아래와 같습니다. clientHeight를 조절하기 위해 useRef를 사용하여 div tag에 적용했습니다. 

const divRef = useRef<HTMLDivElement>(null);
const [handlePosition, setHandlePosition] = useState('300vh');

useEffect(() => {
   setHandlePosition(`${(divRef.current.clientHeight * 3) / 300}px`);
}, []);

return (
    <div ref={divRef}>
        {/* some content */}
    </div>
);

 

하지만, 해당 코드를 실행시 undefined 오류가 발생합니다. 

 

TS2532: Object is possibly 'undefined'.

 

Why?

해당 에러는 divRef.current 값이 undefined일 가능성이 있기 때문에 발생하는 에러입니다. 현재 코드에서 이 값이 null이 가능성이 있고, 이 경우에 divRef.current.clientHeight 에서 undefined가 반환될 수 있습니다. 

 

위 오류는  약 2가지 방법으로 해결할 수 있습니다. 

 

How to solve the problem

#1 null 체크하기

divRef.current 값이 null이 아닐 때만 setHandlePosition 함수를 호출하도록 처리합니다.

useEffect(() => {
    if (divRef.current) {
        setHandlePosition(`${(divRef.current.clientHeight * 3) / 300}px`);
    }
}, []);

 

#2 옵셔널 체이닝 연산자(?) 사용

useEffect(() => {
    if (divRef.current) {
        setHandlePosition(`${(divRef.current.clientHeight * 3) / 300}px`);
    }
}, []);