[TIL] useRef current null 이슈 해결

📘 TL;DR

특정 element를 조건부로 호출하고 있기에 초기 렌더링 시 컴포넌트가 만들어지지 않은 상태에서, ref.current가 null인 이슈가 발생한다. ref 특성상 렌더링 될 때 데이터를 받아오고, 읽기 전용이라 리렌더링을 발생하지 않고 업데이트되지 않도록 동작하므로 발생하는 문제이다. 따라서 ref에 있는 조건을 하위로 옮겨서 element가 항상 렌더링 되도록 수정하여 해결하였다.

 

✅ 요구사항

🙋🏽 PO: 리뷰를 작성할 때 리뷰 작성 영역이 최상단으로 스크롤되도록 만들어주세요~

👩🏻‍💻 FE: textarea 쪽에 ref 추가해서 focus되었을 때 scrollto 하면 되겠다!

 

❗️ 에러 발생

<textarea>를 감싸는 상위 태그 <section>의 element를 useRef를 사용하여 가져왔는데,

const commentRef = React.useRef<HTMLDivElement>(null);

<section ref={commentRef}> ... </section>

 

아래처럼 commentRef.current 를 확인해 보니 null인 것을 확인할 수 있었다.

 

❔ 원인

먼저 useRef에 대해 알아보자. ref 특성상 렌더링될 때 데이터를 받아오고, 읽기 전용이라 리렌더링을 발생하지 않아 업데이트되지 않도록 동작한다. 그렇다면 코드를 확인해보자. 

const commentRef = React.useRef<HTMLDivElement>(null);

if (!writeStatus || reviewId !== writeReviewId) {
  return;
}

return (<section ref={commentRef}> ... </section>);

 

아하! 코드를 확인해보니 조건부로 해당 <section/>을 표시하도록 되어 있었다. 작성하기 버튼을 눌렀을 때 writeStatus를 true로 할당해 주고, 리뷰 목록의 reviewId와 현재 작성하고자 하는 writeReviewId가 같아야 해서 해당 조건까지 충족하면 작성 영역(textarea)을 노출하도록 되어 있다. 

이때 위 조건을 만족하지 못하면 return을 해주고 있어서, commentRef에 해당하는 element가 렌더링 되지 않으므로 발생하는 문제이다. 따라서 버튼을 클릭해서 노출했을 때 처음에는 null일 수밖에 없다.

 

💡 문제 해결

리뷰 작성 영역 노출 조건을 하위로 옮겨서 <section>이 초기 렌더링 시 항상 렌더링될 수 있도록 수정하였다. 

const commentRef = React.useRef<HTMLDivElement>(null);

const isShow = writeStatus && reviewId === writeReviewId;

return (
  <section className={cx('comment')} ref={commentRef}>
    {isShow ? (
      <>
        <textarea/>
        ...
      </>
    ) : null}
  </section>
);

 

확인해 보면 ref가 element를 항상 잘 찾고 있다! null 문제가 해결되었고 이제 여기에 scroll 동작을 붙이면 된다!

 

✍🏻 회고

ref.currnet null 에러는 종종 봤었는데, 당황하기 쉬운 이슈인 것 같아서 한번 정리해 보았다. 개발을 하다 보면 어떤 에러를 만났을 때 내가 사용하는 기술의 공식 문서를 살펴보는 것이 베스트라는 말을 많이 듣는데, 확실히 동작 원리를 이해한 다음에야 이슈를 이해하고 마침내 문제를 해결할 수 있게 되는 것 같다. 다른 방법도 많지만, 가장 정확한 길잡이인 건 부정할 수 없다. 언제나 공식 문서를 가까이하자!