Textarea Autosize

Textarea Autosize (자동 높이 텍스트 영역)

Textarea Autosize 컴포넌트는 내용의 길이에 맞춰 자동으로 높이를 조절하는 컴포넌트예요.

출처: 문서

본문

소개 (Introduction)

Textarea Autosize는 네이티브 <textarea> HTML을 대체하는 유틸리티 컴포넌트예요. 키보드 입력과 창 크기 조절 이벤트에 반응해 높이가 자동으로 조절돼요.

기본적으로 비어 있는 Textarea Autosize 컴포넌트는 아래 데모처럼 한 줄로 렌더링돼요:

import TextareaAutosize from '@mui/material/TextareaAutosize';

export default function EmptyTextarea() {
  return (
    <TextareaAutosize
      aria-label="empty textarea"
      placeholder="Empty"
      style={{ width: 200 }}
    />
  );
}

기초 (Basics)

Import

import TextareaAutosize from '@mui/material/TextareaAutosize';

최소 높이 (Minimum height)

minRows prop을 사용해 컴포넌트의 최소 높이를 정의해요:

import TextareaAutosize from '@mui/material/TextareaAutosize';

export default function MinHeightTextarea() {
  return (
    <TextareaAutosize
      aria-label="minimum height"
      minRows={3}
      placeholder="Minimum 3 rows"
      style={{ width: 200 }}
    />
  );
}

최대 높이 (Maximum height)

maxRows prop을 사용해 컴포넌트의 최대 높이를 정의해요:

import TextareaAutosize from '@mui/material/TextareaAutosize';

export default function MaxHeightTextarea() {
  return (
    <TextareaAutosize
      maxRows={4}
      aria-label="maximum height"
      placeholder="Maximum 4 rows"
      defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua."
      style={{ width: 200 }}
    />
  );
}

TextareaAutosize API

Demos

이 React 컴포넌트 사용법에 대한 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 주세요:

Import

import TextareaAutosize from '@mui/material/TextareaAutosize';
// or
import { TextareaAutosize } from '@mui/material';

Props

Name Type Default Required Description
maxRows number | string - No 최대 행(rows) 수입니다.
minRows number | string 1 No 최소 행(rows) 수입니다.

Note: ref는 루트 요소로 전달됩니다.

그 외에 제공된 다른 props는 모두 루트 요소(네이티브 요소)에 전달됩니다.

소스 코드 (Source code)

이 페이지에서 정보를 찾지 못했다면 컴포넌트 구현을 살펴보는 것도 방법이에요.

더 알아보기 (Learn more)