리액트 타입스크립트 공부하기 - input 박스 관련 속성

실무에서 자주 쓰는 인풋 관련 속성들 (React + TypeScript에서도 그대로 사용 가능)🐰

속성	설명	예시
type	입력 필드의 종류 설정 (text, password, email 등)	<input type="text" />
value	입력값을 상태로 관리할 때 사용 (controlled component)	<input value={text} onChange={handleChange} />
defaultValue	초기값 설정 (uncontrolled component에서 사용)	<input defaultValue="Hello" />
onChange	입력값이 바뀔 때마다 실행할 함수	<input onChange={(e) => setText(e.target.value)} />
placeholder	입력 전 힌트로 보여줄 텍스트	<input placeholder="Enter your name" />
name	form 데이터를 보낼 때 key 이름 역할	<input name="username" />
id	라벨(label)과 연결하거나 DOM 조작 시 사용	<input id="email" />
autoFocus	컴포넌트가 마운트되자마자 focus 되게 함	<input autoFocus />
required	form 제출 시 반드시 입력되도록 설정	<input required />
disabled	입력창 비활성화	<input disabled />
readOnly	읽기 전용으로 만듦 (수정 불가능)	<input readOnly value="읽기 전용" />
maxLength	입력할 수 있는 최대 글자 수 제한	<input maxLength={10} />
minLength	최소 글자 수 제한 (주의: 제출 시 유효성 검사로만 작동함)	<input minLength={5} />
pattern	정규식을 이용한 유효성 검사 (폼 제출 시 체크됨)	<input pattern="\d{3}-\d{3,4}-\d{4}" />
autoComplete	자동 완성 허용 여부 (on, off, 혹은 특정 필드 타입)	<input autoComplete="off" />
className	스타일 적용 (Tailwind나 CSS 클래스 등)	<input className="border px-2 py-1" />
style	인라인 스타일 적용	<input style={{ color: 'red' }} />

가장 자주 쓰는 조합 예시

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  return (
    <input
      type="text"
      name="username"
      placeholder="Enter your name"
      value={name}
      onChange={handleChange}
      autoFocus
      required
      maxLength={20}
      className="border p-2 rounded"
    />
  );
}

 

간단예제

<input
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  maxLength={6}
  required
  placeholder="6자리 입력"
  autoComplete="off"
  autoFocus
/>

 

속성에 대한 설명

 

"6자리로 제한 걸고 싶으면 6으로 하면 돼? 이후로는 안 쳐져?"

맞아! maxLength={6}이라고 하면, 사용자가 인풋에 6글자까지만 입력할 수 있어.
6글자 넘는 순간부터 키보드를 눌러도 입력이 안 돼.

"이건 유효성 검사랑은 조금 다르지?"

 맞아! maxLength는 HTML 자체의 입력 제한이고,
**유효성 검사(validation)**는 보통 폼 제출할 때 데이터가 유효한지 체크하는 거야.

예를 들어:

• maxLength: 사용자가 입력 자체를 못하게 막음
• 유효성 검사: 사용자가 입력은 했지만, 그걸 제출하기 전에 조건 확인함

리액트 + 타입스크립트에서 인풋 박스의 글자 수 제한을 거는 방법은 아주 간단.

HTML의 maxLength 속성을 사용하면 된다

import React, { useState } from 'react';

function TextInput() {
  const [value, setValue] = useState<string>('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      maxLength={10} // 글자 수 제한 (예: 최대 10글자)
      placeholder="최대 10자 입력"
    />
  );
}

export default TextInput;

---

추가 팁: 현재 글자 수 보여주기

아래처럼 현재 입력한 글자 수도 함께 보여줄 수 있음

<p>{value.length} / 10</p>