typescript에서 useRef.current는 null 체크가 필수인가요?

안녕하세요! 결론부터 말씀드리면, inputRef.current의 타입은 TextInput이라는 것이 확실시되어야 해요. focus는 null이 아니라 TextInput이라는 타입에 존재하는 메소드이기 때문입니다. (엄밀하게는 null 체크를 해야한다기보다 TextInput이라는 것이 확실시되어야 한다는 말이 정확해요. 왜냐하면 useRef 선언 시점에 null을 넣지 않고 string이나 number같은 타입을 넣어도 focus를 동작하게 할 수는 있거든요. 사실 아무도 그렇게 쓰지도 않고 별로 중요한 얘기도 아니라, 여기서는 그냥 넘어가겠습니다🙂) 따라서 아래와 같이 사용하시면 될 것 같아요. 1번) if문 사용 useEffect(() => { if (isRead && inputRef.current) { inputRef.current.focus(); } }, []); 2번) optional chaining 사용 useEffect(() => { if (isRead) { inputRef.current?.focus(); } }, []); 3번) Type Assertion(타입 단언) 사용 <- 이 부분이 맨 처음 말씀드린 내용인데, 이렇게 쓰는 게 별로 일반적이지는 않습니다. 1번 또는 2번 방법 중에서 골라 쓰시면 될 거 같아요! useEffect(() => { (inputRef.current as TextInput).focus(); }, []); 추가 설명드리면, 질문자님께서 만드신 코드의 if (isRead && inputRef && inputRef.current)에서 inputRef는 null 체크를 할 필요가 없습니다. 왜냐하면 inputRef에는 useRef 선언 당시 React.RefObject<TextInput>라는 타입의 object를 할당하기 때문이에요. inputRef의 타입: React.RefObject<TextInput> inputRef.current의 타입: TextInput 또는 null 혹시 이게 진짜인지 궁금하시면 아래 예시 코드와 같이 로그를 한 번 찍어보세요! import { useEffect, useRef } from "react"; const App = () => { const inputRef = useRef<HTMLInputElement>(null); console.log("실제 DOM에 마운트되기 전이에요."); console.log(inputRef); console.log(inputRef.current); useEffect(() => { console.log("실제 DOM에 마운트된 후에요."); console.log(inputRef); console.log(inputRef.current); }, []); return <input ref={inputRef} />; }; export default App; 아마 아래처럼 로그가 찍힐겁니다. 실제 DOM에 마운트되기 전이에요. { current: null } null 실제 DOM에 마운트된 후에요. { current: input } <input> inputRef는 마운트 전/후 모두 null인 적이 없고 언제나 current를 속성으로 가지고 있는 object네요! 조금이나마 도움이 되셨길 바라며, 혹시라도 더 궁금하신 점 있으시면 댓글 남겨주세요~

const inputRef = useRef<TextInput>(null); 이곳에서 inputRef를 null로 초기화 하기 때문에 그렇습니다. 우선 TextInput | null 로 제너릭을 넣어주시고, 사용하는 부분에서 optional chaining 을 통해inputRef?.current~~ 로 작성해주시는게 적절해 보입니다. 더 좋은 방법도 있을 거 같은데 잘 모르겠네요.

안녕하세요 const inputRef = useRef<TextInput>(null!); 위와 같이 non-null 연산자를 사용하시면 null체크는 피할 수 있지만 2문제가 있습니다 1. ref.current에 재할당이 가능합니다. 제네릭 타입인 TextInput에 한하여 재할당이 가능하므로 실수할 여지가 적기는 하지만 완벽하게 막아주지는 못합니다 2. 조건부 렌더링일 때 문제가 발생할 수 있습니다. 널체크를 하지 않기 때문에 당연한 문제입니다 제 경험상 조건부 렌더링이 아닌 상황에서 사용할 때 문제는 없었습니다

1
const inputRef = useRef<TextInput>(null!);