[Next.js] 게시글 업로드 페이지: 동적으로 element 높이 조정하기(custom hook, throttle)

게시글 업로드 페이지: 동적으로 element 높이 조정하기(custom hook, throttle)

 

⚠️ 배경

게시글 업로드 페이지를 구현하면서, 텍스트를 입력하기 위한 textarea의 높이가 고정되어 있지 않고, 입력된 텍스트의 양에 따라 동적으로 높이가 확장되는 UI가 필요했습니다.

 

1. 텍스트 길이에 따른 높이 변화   

사용자가 작성하는 텍스트의 양은 고정되어 있지 않으며, 작성 도중에 계속 증가하거나 감소할 수 있습니다. 따라서 textarea의 높이가 텍스트 양에 맞춰 유연하게 조정되어야 사용자 경험(UX)이 개선됩니다.

2. CSS만으로는 해결되지 않는 스크롤 문제   

min-height와 max-height를 CSS로 설정하면 높이를 일정 범위 내에서 고정할 수 있지만, 텍스트가 증가해도 textarea의 크기가 자동으로 확장되지 않고 텍스트가 잘리는 문제가 발생했습니다.

 

-> 이 문제를 해결하기 위해, 높이를 텍스트의 양에 따라 동적으로 조정하는 로직을 구현하게 되었습니다.

 

이 글에서는 onInput 이벤트를 활용한 기본적인 구현부터, 커스텀 훅으로 로직을 추상화하고 성능 이슈를 throttle 통해 해결하는 방법까지 상세히 다뤄보겠습니다.

 

---

📍 구현 방향

textarea의 높이를 텍스트 양에 따라 동적으로 조정하는 로직을 구현하기 위해 다음과 같은 방법을 사용했습니다.

 

• 텍스트 입력 이벤트 활용 (onInput) : 사용자가 텍스트를 입력하거나 삭제할 때마다 textarea의 높이를 조정하도록 설정.
• scrollHeight 속성 활용 : textarea.scrollHeight는 텍스트 콘텐츠의 전체 높이를 계산할 수 있는 속성으로 이를 활용해 콘텐츠 높이에 맞게 textarea의 높이를 조정.
• style.height 초기화 후 재설정 : 기존 높이를 초기화(style.height = 'auto')하여 텍스트가 줄어드는 경우에도 적절히 높이를 다시 계산할 수 있도록 처리.

 

 

기본 구현: onInput를 활용한 동적 높이 조정

 

textarea의 높이를 입력 내용에 맞게 자동으로 조정하려면 ononInput 이벤트를 사용합니다. onInput은 사용자가 텍스트를 입력할 때마다 이벤트가 트리거되어 scrollHeight를 기반으로 높이를 조정합니다.

// UploadForm.tsx
import { useRef } from 'react';

interface IUploadFormProps {
  className?: string;
}

export default function UploadForm({ className }: IUploadFormProps) {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const handleTextChange = () => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto'; // 높이 초기화
      textarea.style.height = `${textarea.scrollHeight}px`; // 입력 내용에 따라 높이 조정
    }
  };

  return (
    <textarea
      ref={textareaRef}
      onInput={handleTextChange}
      rows={1}
      placeholder="내용을 입력하세요"
      className="resize-none w-full"
    />
  );
}

• textarea의 높이를 scrollHeight 값으로 설정하여 입력 내용에 따라 높이가 조정됩니다.(textarea.scrollHeight: 콘텐츠 전체 높이) 
• textarea.style.height = 'auto'는 높이를 초기화하여 기존 높이를 제거하고 높이 조정의 부드러움을 유지합니다.
• 최소 높이는 rows={1}로 설정합니다.

 

---

🛠️ 리팩토링: 커스텀 훅으로 로직 추상화

높이 자동 조정을 위한 로직을 별도의 훅(Hook)으로 추상화하여 다른 컴포넌트의 다양한 DOM 요소에서 재사용할 수 있도록 분리하였습니다. 

useAutoResizeHeight 훅은 해당 요소에 대한 참조와 함께 입력 이벤트를 처리하여 높이를 자동으로 조정하는 로직을 캡슐화합니다.

 

 

useAutoResizeHeight 커스텀 훅 제작

// useAutoResizeHeight.ts
import { useRef, useCallback } from 'react';

export function useAutoResizeHeight<T extends HTMLElement>() {
  const elementRef = useRef<T>(null);

  const adjustHeight = useCallback(() => {
    const element = elementRef.current;
    if (element) {
      element.style.height = 'auto'; // 높이 초기화
      element.style.height = `${element.scrollHeight}px`; // 콘텐츠에 맞게 높이 조정
    }
  }, []);

  return { elementRef, resizeToFitContent };
}

• 제네릭 사용 (T extends HTMLElement): textarea뿐만 아니라 다른 DOM 요소에서도 사용 가능합니다.
• useCallback으로 최적화: 동일한 함수를 여러 번 생성하지 않도록 합니다.

 

 

useAutoResizeHeight 훅을 UploadForm에서 활용

 

UploadForm에서 useAutoResizeTextarea 훅을 호출하여 elementRef와 resizeToFitContent을 사용합니다.

// UploadForm.tsx
function UploadForm() {
  const { elementRef, resizeToFitContent } = useAutoResizeHeight<HTMLTextAreaElement>();

  return (
    <textarea
      className="scrollbar-hidden w-full resize-none text-14px focus:outline-none"
      placeholder="게시글 입력하기..."
      ref={elementRef}
      onInput={resizeToFitContent}
      rows={1}
    />
  );
}

 

개선 후 효과

 

1. UploadForm에서 UI 로직만 처리하고, 비즈니스 로직은 훅으로 분리하여 가독성이 향상되었습니다.
2. 다른 컴포넌트에서도 useAutoResizeHeight를 호출해 동일한 동작을 구현할 수 있게 되어 재사용성이 향상되었습니다. 특히 DOM 요소의 타입을 제네릭으로 받아 타입 오류를 방지하고, 다양한 UI 컴포넌트에서 활용 가능하도록 추상화할 수 있었습니다.
3. useAutoResizeHeight가 독립적으로 동작하므로, 변경이 필요할 때 해당 훅만 수정하면 되기 때문에 유지보수성이 향상되었습니다.

 

 

but, 이 방식은 간단하면서도 유용하지만 입력이 많아질 경우 성능 문제가 발생할 수 있어 성능 최적화할 수 있는 방법이 필요했습니다.

 

---

✨ 성능 최적화:  throttle 활용

onInput 이벤트는 사용자가 입력할 때마다 트리거되기 때문에 입력 속도가 빠르거나 많아지게 되면 성능 문제가 발생할 수 있습니다. 이를 해결하기 위해 throttle을 적용해 호출 빈도를 제한하도록 수정하였습니다.

 

 

throttle이란?

 

throttle은 주기적으로 발생하는 이벤트를 일정 간격으로 제한하여 처리하는 성능 최적화 기법입니다.

즉, 이벤트가 아무리 자주 발생하더라도 설정된 시간 간격 내에서는 한 번만 실행되도록 합니다.

 

 

throttle의 동작 원리

 

1. 지속적으로 이벤트가 발생 : 사용자가 빠르게 타이핑하거나 스크롤하는 경우처럼, 이벤트가 매우 짧은 간격으로 반복 발생.
2. 일정한 간격으로 이벤트 실행 : 설정된 시간 간격에 따라 이벤트를 실행하고, 그 사이의 이벤트는 무시.

-> 일정한 주기로 이벤트가 실행되므로, 과도한 연산을 방지하고 성능을 최적화.

 

 

throttle을 적용해야 하는 경우

 

throttle은 이벤트가 지속적으로 발생하는 상황에서 일정 간격으로만 실행이 필요할 때 적합합니다.

• 스크롤 이벤트 : 사용자가 페이지를 스크롤할 때 이벤트가 수백 번 호출될 수 있기 때문에 스크롤 위치를 업데이트하거나 특정 위치에 도달했는지 확인하는 로직에 적용.
• 윈도우 리사이즈 이벤트 : 브라우저 창 크기가 변경될 때 레이아웃을 업데이트하는 로직에 지나치게 빈번한 호출을 제한하여 성능을 최적화.
• 드래그 앤 드롭 : 사용자가 드래그할 때 마우스 위치를 업데이트하는 로직에 적용해 UI 업데이트 빈도를 제한.
• 실시간 입력 처리 : 입력 중에 애니메이션이나 화면 업데이트가 필요한 경우(textarea의 높이를 조정하거나, 입력 내용을 실시간으로 보여주는 미리보기)에 적용.

 

throttle vs debounce

 

throttle은이벤트 발생 간격을 제한, debounce는 이벤트 실행을 지연합니다. 두 기법의 차이를 이해하면 적절한 상황에서 활용할 수 있습니다.

구분	throttle	debounce
동작 방식	지정된 간격마다 이벤트 실행	이벤트 발생 후 지정된 시간 동안 대기 후 실행
사용 사례	스크롤, 리사이즈, 드래그, 실시간 UI 업데이트	검색 자동완성, API 요청, 사용자가 입력을 멈췄을 때 실행
이벤트 실행	지속적으로 발생하는 이벤트 중 일정 간격으로 실행	마지막 이벤트 후 한 번만 실행
적합한 경우	실시간 업데이트가 필요한 경우	이벤트 처리가 끝난 후 작업이 필요할 경우

 

 

Lodash throttle 적용

 

throttle을 적용하여 이벤트가 발생하더라도, 마지막 실행 후 최소 wait 시간이 지나야 다시 실행됩니다.

throttle은 내부 상태를 가지므로, React가 컴포넌트 언마운트 시 이를 클린업해야 메모리 누수를 방지할 수 있습니다.

 

1. Lodash throttle의 내부 동작

Lodash의 throttle은 이벤트 실행을 제한하기 위해 내부 상태를 유지합니다.

  • 마지막으로 실행된 시간(lastRan)

  • 타이머(timeout): 아직 실행되지 않은 대기 중인 함수

이러한 상태는 throttle로 생성된 함수가 계속 유지되며 관리합니다.

 

2. React 컴포넌트의 생명 주기

• React 컴포넌트가 언마운트될 때, throttle 함수 내부의 타이머(timeout)가 여전히 동작하고 있다면 메모리 누수가 발생할 수 있습니다.

• 예를 들어 textarea의 입력 이벤트가 발생 중인데 컴포넌트가 언마운트되면, 대기 중이던 throttle 함수가 여전히 실행될 수 있습니다.

 

3. Cleanup의 필요성

• 컴포넌트 언마운트 시 throttle 함수의 타이머와 상태를 정리해 주어야 메모리 누수와 불필요한 연산을 방지할 수 있습니다.

• Lodash의 throttle은 cancel() 메서드를 제공하여 타이머와 내부 상태를 정리할 수 있습니다.

import { useRef, useCallback } from 'react';
import { throttle } from 'lodash';

export function useAutoResizeHeight<T extends HTMLElement>(throttleTime = 100) {
  const elementRef = useRef<T|null>(null);

  const resizeToFitContent = useCallback(() => {
    const element = elementRef.current;
    if (element) {
      element.style.height = 'auto'; 
      element.style.height = `${element.scrollHeight}px`; 
    }
  }, []);

  // Throttled function 생성
  const throttledResize = useMemo(() => throttle(resizeToFitContent, throttleTime), [
    resizeToFitContent,
    throttleTime,
  ]);

  // Cleanup: Throttle 함수 취소
  useEffect(() => {
    return () => {
      throttledResize.cancel(); // Throttled 함수 정리
    };
  }, [throttledResize]);

  return { elementRef, throttledResize };

_throttle 캐싱

• useMemo로 throttle로 생성된 함수를 캐싱해 매번 새로 생성되지 않도록 설정합니다.

• 메모이제이션을 통해 동일한 의존성 배열(deps)을 가지는 동안 기존의 throttle 함수가 재사용됩니다.

• 컴포넌트가 언마운트되기 전에는 throttle 함수의 내부 상태(예: 타이머)가 유지됩니다.

 

_Cleanup 처리: 

• useEffect Cleanup을 활용해 throttledResize.cancel()을 호출하여 언마운트 시 throttle의 타이머(timeout)와 내부 상태를 정리합니다.

• 메모이제이션은 유지하면서도 컴포넌트 생명 주기에 따라 throttle을 완전히 종료하여 메모리 누수를 방지합니다.

 

 

throttle 적용 후 효과

1. 과도한 이벤트 호출이 제한되어 불필요한 DOM 조작을 방지하여 성능을 보다 효율적으로 개선하였습니다.
2. 사용자 입력 속도가 빨라도 부드럽게 동작하여 사용자 경험이 향상되었습니다.
3. 빠르게 타이핑할 때도 지정된 간격으로만 이벤트를 실행하여 CPU 부하를 줄여 결과적으로 효율적으로 리소스를 사용하게 되었습니다.
4. throttle을 활용하여 복잡한 로직 없이 간단히 최적화 구현할 수 있었습니다.

---

 

매번 코드를 작성할 때마다 느끼는 거지만 단순히 동작하는 코드를 작성하는 것에서 그치지 않고, 성능 최적화와 유지보수성까지 고려한 코드를 작성하는 것에 대한 중요성을 실감하는 것 같습니다.

textarea의 동적 높이 조정은 작은 UX 개선이지만, 커스텀 훅과 최적화를 통해 확장성과 유지보수성을 동시에 갖춘 솔루션을 구현할 수 있었습니다.