[react] Object is possibly 'null' (ft. typescript, useRef) 오류 해결

react error

 

react hooks에서 간단한 input 을 사용하는 구조에서, focus()를 사용하기 위하여  
해당 input 태그에  useRef 를 삽입하고, const inputRef = useRef(null)로 선언을 하였는데,
focus 처리시, Object is possibly 'null' 이라는 타입스크립트 오류가 났습니다. 

 

오류 메시지

 

before

import React, { useRef } from "react";

const Login = () => { 
  const inputRef = useRef(null);
 
  useEffect(() => {
    inputRef.current.focus(); //오류 발생
  }, []);

  return (
        <form onSubmit={onSubmitLogin}>
          <input
            ref={inputRef}
            ...
          />
      	 ...
        </form>
  );
};

export default Login;

 

해결 방법

  const inputRef = useRef<any>();

 

 after

import React, { useRef } from "react";

const Login = () => { 
  const inputRef = useRef<any>(); //코드 수정
 
  useEffect(() => {
    inputRef.current.focus(); //정상 작동
  }, []);

  return (
        <form onSubmit={onSubmitLogin}>
          <input
            ref={inputRef}
            ...
          />
      	 ...
        </form>
  );
};

export default Login;