22.04.13- TIL

오늘 한 일

댓글 로드시 textarea의 스크롤을 없애고 텍스트 높이에 따라 textarea 높이 자동 조절 구현

 

배운 점 또는 느낀 점

게시글과 댓글창 텍스트를 textarea 태그를 이용해서 보여주도록 코드를 작성하였는데
게시글과 댓글창이 길어지면 스크롤이 생겨서 보기가 안좋고 사용자가 직접 스크롤을 내려야 하는 문제가 있어 스크롤을 없애고 자동으로 텍스트 높이에 따라 textarea 높이가 맞춰지는 것을 구현하기 위해 검색을 하였다.
검색을 해보니 react에서 이를 구현하기 위해서는 useRef로 textarea dom에 직접 접근하여서 event가 발생할 때 scrollHeight속성을 이용해주면 되고 height속성을 auto로 해주면 된다는 것을 알게 되었다.

나의 경우에는 이벤트가 발생할 때가 아닌 게시글과 댓글을 불러올 때 텍스트 높이에 따라 textarea의 높이가 자동 조절 되어야 되기 때문에 어떻게 하면 좋을까 고민을 하다가 useEffect로 게시글이 업데이트 될 때마다 및 댓글의 텍스트가 업데이트 될 때 마다 textarea의 높이가 자동조절 되면 되겠다 싶어서 그렇게 구현하였다. 검색으로 알게 된것과 나의 생각을 토대로 구현하였더니
성공적으로 기능이 잘 작동하게 되어서 기분이 좋았다.

// 댓글 텍스트를 불러올 시에 댓글창 높이 자동 조절
  const autoSize = useCallback(() => {
    const obj = textRef.current;
    obj.style.height = 'auto';
    obj.style.height = obj.scrollHeight + 'px';
  }, []);
  
  useEffect(() => {
    autoSize();
  }, [text, autoSize]);
  
  <Content value={text} ref={textRef} readOnly disabled />