Logo

Material UI의 TextField 컴포넌트

사용자로 부터 정보를 입력 받는 양식(form) UI의 경우 <input/> 또는 <select/>, <textarea/>와 같은 HTML 엘리먼트가 많이 사용됩니다. 이러한 입력 엘리먼트는 브라우저마다 다른 스타일로 표현되고, 기본 스타일은 그대로 사용하기에는 너무 단조롭기 때문에 CSS를 이용해서 커스텀 스타일을 해주는 것이 일반적일 것입니다.

Material UI는 이러한 입력 엘리먼트를 이미 예쁘게 디자인된 React 컴포넌트 형태로 제공을 해주기 때문에 우리는 그냥 편리하게 갔다 쓰기만 하면 됩니다. 이번 포스팅에서는 Material UI의 <TextField/> 컴포넌트에 대해서 알아보도록 하겠습니다.

Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다.

TextField

<TextField/>는 폼 UI에서 하나의 완전한 입력 항목 자체를 컴포넌트화 시켜 놓았습니다. 완전한 입력 항목을 생각해보면 단순히 사용자의 입력을 받는 <input/> 엘리먼트 뿐만 아니라, 입력해야 하는 내용이 무엇인지를 알려주는 <label/> 엘리먼트도 필요합니다. 그리고 선택적으로 해당 입력 항목에 대한 부연 설명을 넣을 수 있으면 좋을 것입니다.

<TextField/>는 내부적으로 Material UI의 다른 컴포넌트인 <InputLabel/>, <Input/>, <FormHelperText/> 등으로 구성되어 있는 고수준 컴포넌트입니다. 따라서 우리는 매우 편리하게 상위 컴포넌트인 <TextField/>를 사용하면, 여러 개의 하위 컴포넌트를 사용하는 효과를 얻을 수 있습니다. 이것이 제가 개인적으로 <TextField/>를 Material UI의 꽃이라고 생각하는 이유이기도 합니다.

3가지 형태

<TextField/>는 standard, filled, outlined 이렇게 3가지 형태로 제공됩니다. filled 형태는 배경색이 들어가 있고, outlined 형태는 테두리가 있습니다. 기본 형태인 standard는 배경색과 테두리 없이 밑줄만 표시됩니다.

import React from "react";
import { TextField } from "@material-ui/core";

export default () => (
  <>
    <TextField label="Standard" />
    <TextField label="Filled" variant="filled" />
    <TextField label="Outlined" variant="outlined" />
  </>
);

상태

<TextField/>는 required나 disabled와 같은 <input/> 엘리먼트 기본 속성 뿐만 아니라, error와 같은 추가적인 상태도 지원합니다. error prop을 사용할 때, helperText prop도 같이 사용하면 효과적으로 유효하지 않은 입력값에 대한 피드백을 줄 수 있습니다.

import React from "react";
import { TextField } from "@material-ui/core";

export default () => (
  <>
    <TextField label="Required" required />
    <TextField label="Disabled" disabled />
    <TextField label="Error" error helperText="Invalid input." />
  </>
);

Textarea / Selectbox

여러 줄의 입력을 받을 수 있는 <textarea/>는 multiline prop을 사용하면 됩니다.

import React from "react";
import { TextField } from "@material-ui/core";

export default () => (
  <TextField
    label="내용"
    multiline
    rows={3}
    defaultValue="내용을 입력해주세요."
  />
);

여러 개의 옵션 중 하나를 선택받을 수 있는 <select/>는 slect prop을 사용하면 됩니다.

import React from "react";
import { TextField, MenuItem } from "@material-ui/core";

export default () => (
  <TextField select label="Size" variant="outlined">
    <MenuItem>Small</MenuItem>
    <MenuItem>Medium</MenuItem>
    <MenuItem>Large</MenuItem>
  </TextField>
);

아이콘 삽입

<InputAdornment/> 컴포넌트를 사용하면 어렵지 않게 <TextField/> 앞뒤에 아이콘을 삽입할 수 있습니다.

import React from "react";
import { TextField, InputAdornment } from "@material-ui/core";
import SearchIcon from "@material-ui/icons/Search";

export default () => (
  <>
    <TextField
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <SearchIcon />
          </InputAdornment>
        ),
      }}
    />
    <TextField
      variant="outlined"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <SearchIcon />
          </InputAdornment>
        ),
      }}
    />
  </>
);

색상과 크기

색상은 color prop을 이용해서 조절할 수 있습니다.

import React from "react";
import { TextField } from "@material-ui/core";

export default () => (
  <>
    <TextField label="Primary" variant="filled" />
    <TextField label="Secondary" variant="filled" color="secondary" />
  </>
);

크기는 size prop을 이용해서 조절할 수 있습니다.

import React from "react";
import { TextField } from "@material-ui/core";

export default () => (
  <>
    <TextField label="Medium" variant="outlined" />
    <TextField label="Small" variant="outlined" size="small" />
  </>
);

전체 코드

본 포스팅에서 작성한 코드는 아래에서 확인하실 수 있습니다.

마치면서

이상으로 Material UI의 <TextField/> 컴포넌트를 어떻게 사용하는지 간단하게 살펴보았습니다. 추후 기회가 되면 <TextField/> 컴포넌트를 기반으로 하나의 완전한 폼 UI를 만드는 것을 포스팅해보도록 하겠습니다.

This work is licensed under CC BY 4.0

messageCircle