🌟 textarea 자동 높이 조절

거의 오늘 하루 종일 날렸다고 해도 과언이 아닌데 아래 코드가 이 지옥에서 날 구출해 냈다 ...따흐흑
오늘 내내 한숨 푹푹 쉬며 구글링했는데 생각보다 답은 가까운 곳에 있었다.
그리고 오늘을 통해 깨달은 바, '언젠가 끝은 온다.'

각설하고,
리액트에서 textarea 높이를 자동으로 조절해보자!

📍 react

//생략 

  const textRef = useRef();
  const autoResizeTextarea = useCallback(() => {
    textRef.current.style.height = "auto";
    textRef.current.style.height = textRef.current.scrollHeight + "px";
  }, []);


return (
  //생략
  <textarea
    className="tweetSender__writeBox__text__textarea"
    type="text"
    wrap="on"
    placeholder="무슨 일이 일어나고 있나요?"
    maxLength={150}
    value={tweet}
    onChange={onChange}
    ref={textRef}
    onInput={autoResizeTextarea}
    />
)

📍 scss

.tweetSender__writeBox__text__textarea {
        cursor: text;
        line-height: 24px;
        pointer-events: auto;
        width: 100%;
        display: block;
        resize: none;
        overflow-y: hidden;
        background-color: black;
        color: white;
        min-height: 52px;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        height: auto;
        &::placeholder {
          font-size: inherit;
        }

1. const textRef = useRef();
   textarea 엘리먼트에 직접 접근하기 위해 useRef() 훅을 사용하자!
   textarea 창을 useRef 훅을 이용해 textRef로 지정 DOM을 설정한다.

   • useRef()
     : current 속성을 가지는 객체를 반환하는 Hook이다.
     • 인자로 넘어온 초기 값을 current 속성에 할당한다.
     • current의 속성은 값을 변경해도 상태를 변경할 때 처럼 리액트 컴포넌트가 리랜더링 되지는 않는다. 즉, 리랜더링 되더라도 current의 속성값은 지속된다.
     • useRef()는 보통 DOM 노드나 React 엘리먼트에 직접 접근할 때 사용한다.
     • Ref객체의 .current 값은 선택한 DOM을 가리킨다.
       여기서 textRef.current는 textarea 엘리먼트를 가리킨다.
       따라서 textRef.current.style.height은 textarea 엘리먼트의 height 값을 가리키고 textRef.current.scrollHeight은 textarea 엘리먼트의 전체 scrollHeight값을 가리킨다.

2. onInput={autoResizeTextarea}
   textarea에 input될 때마다, 즉 글이 입력될 때 마다 autoResizeTextarea 함수를 호출한다.

3. useCallback()
   useCallback로 autoResizeTextarea 함수를 감싸서 함수를 재사용할 수 있게 하자.

   • useCallback(함수, [배열])
     : 특정 함수를 재사용하고 싶을 때 사용하는 Hook이다.
     • useCallback은 첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게한다.
     • useCallback()을 사용하면, 해당 컴포넌트가 랜더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다.
       즉, 여기서는 autoResizeTextarea 컴포넌트가 랜더링되더라도 textarea의 높이가 바뀌지 않는 한 기존 함수를 계속해서 반환한다.

   • (📚 참고) 리액트가 리랜더링 하는 조건
     • 자신의 state 변경될 때
     • 부모 컴포넌트로부터 전달 받은 props가 변경될 때
     • 부모 컴포넌트가 리랜더링될 때

4. textRef.current.style.height = "auto";
   textarea의 height을 "auto"로 바꿔준다.
   height 값을 auto로 입력해 놓으면 textarea에 적은 글을 지웠을 때 늘어난 textarea의 높이가 auto로 바뀌어 알맞은 높이로 줄어든다.

5. textRef.current.style.height = textRef.current.scrollHeight + "px";
   textarea의 height에 textarea의 scrollHeight 높이를 넣어준다.
   textarea에 입력한 글이 textarea의 높이를 초과할 경우, textarea의 높이가 자동으로 scrollHeight 높이만큼 늘어나게 되어 textarea의 높이가 자동으로 조절되는 느낌을 줄 수 있다.