[오류리뷰] useRef()

로그인/회원가입 페이지에서 인풋창에 빈 칸이거나, 맞는 조건이 아닐 때 에러메세지를 띄워주기 위해 input을 참조해야했다. react의 useRef();를 사용하려고 여기서 했는데 오류가 있었다.

const idInput: RefObject<HTMLInputElement> = useRef(null);
const nicknameInput: RefObject<HTMLInputElement> = useRef(null);
const pwInput: RefObject<HTMLInputElement> = useRef(null);

const registerUser = async () => {
    if (idInput.current!.value === "")
      return errorMessageStatus("아이디를 입력해주세요.");
    if (!signUpID.includes("@"))
      return errorMessageStatus("이메일 형식으로 적어주세요.");
    if (nicknameInput.current!.value === "")
      return errorMessageStatus("닉네임을 입력해주세요");
    if (pwInput.current!.value === "")
      return errorMessageStatus("비밀번호를 입력해주세요");

	//나머지 코드...
}

useRef() 초기값에 null을 넣어주고, 함수 안 조건에 ref를 쓰는데 계속 오류밑줄이 생기는 것이다. 그래서 처음 상태가 null이어서 input 컴포넌트 자체는 있으니까 함수명 오른쪽에 느낌표를 붙였는데 이번엔 변수명이 null 상태라서 !를 주면 안된다는 오류가 나는 것이다. (당연하다. 초기값은 null로 지정해줬으니까..)
여기서 이해가 도저히 안됐는데, 구글링을 해보고 오류이유를 보니, 오류가 말하는게 input을 말하는게 아니라, useRef()의 current 상태를 말하는 것이었다. 그래서 current에 느낌표를 붙이니 오류가 사라졌다.

*** : useRef 훅을 사용할 때 초기값으로 null을 전달하는 이유는 해당 RefObject가 참조할 요소를 초기에는 알 수 없기 때문입니다.
기본적으로 useRef는 current라는 속성을 가진 객체를 반환합니다. 이 current 속성은 RefObject가 참조하는 실제 DOM 요소나 객체를 가리킵니다. 그러나 초기에는 이 값이 설정되지 않아 null로 초기화됩니다.

그러나 대부분의 경우, 초기에 어떤 값을 가리킬지 알 수 없는 경우가 많습니다.(= 이 함수가 최초로 실행될 때는 DOM에 존재하지 않음.) 특히 React 컴포넌트가 마운트된 이후에 비로소 실제 DOM 요소가 생성되는 경우가 많습니다. 따라서 보통은 초기에 null로 초기화하고, 이후에 필요한 DOM 요소나 객체가 생성되면 해당 RefObject의 current 속성에 할당됩니다.

따라서 코드에서 useRef(null)을 사용하는 것은 이 초기화를 나타내는 표현입니다. 초기에는 어떤 값도 가리키지 않고, 이후에 실제 DOM 요소를 참조하도록 업데이트할 수 있습니다.