[HTML] 태그<> 속성모음

 

# attribute

: HTML의 초기 설정 값 (HTML attribute)

 

• JSX 내부에서 HTML 태그에 전달하는 초기 속성 값
• 문자열(String) 형태로 전달됨
• React가 실제 DOM을 생성할 때 Property로 변환됨

 

# property

: JavaScript에서 실제 동작하는 값 (Javascript property)

 

• React가 실제 DOM을 생성하면 Property로 변환됨
• 현재 상태를 나타내며, JavaScript에서 동적으로 변경 가능
• JSX에서는 이벤트 핸들러를 함수로 직접 전달해야 함
• JavaScript 함수(function)를 직접 바인딩할 수 있음

 

React 코드 예제)

// attribute
<div id="myDiv" className="container" data-info="React" />

// property
<input onChange={handleChange} />

// attribute이면서 property
<input type="text" value="Hello" />

---

** <input> tag 기준

[ 속성 ]

1. onBlur

: 입력 필드(input)에서 포커스를 벗어났을 때 실행되는 이벤트 핸들러

- 마우스로 다른 곳을 클릭하거나, Tab 키로 이동할 때 발생한다.

 

[ 사용 태그 ]

input, textarea, select, button, a 태그

 

이벤트 타입 )

// type
event: React.FocusEvent<HTMLInputElement>

 

[ 사용 예시 ]

✔ 사용자가 값을 입력하지 않고 input을 벗어나면(onBlur 발생) 오류 메시지 출력.

✔ 입력값 검증(Validation)

---

2. onFocus

: 사용자가 input을 클릭하거나 포커스를 주었을 때 실행됨

 

[ 사용 태그 ]

input, textarea, select, button, a 

 

---

 

3. autoFocus

: 페이지가 로드되면 input 요소가 자동으로 포커스를 가짐

- input에 자동으로 커서가 가게 하는 속성

- HTML 기본 기능으로 초기 1회만 적용됨

 

[ 사용 태그 ]

input, textarea, select 

 

[ 사용 예시 ]

이후 조건에 따른 포커스 제어 : 

✔ useRef를 사용하여 input 요소를 참조하고, useEffect로 렌더링 후 포커스 자동 이동

---

4. onPaste

: 사용자가 Ctrl + V 또는 마우스 우클릭 → "붙여넣기"를 할 때 발생하는 이벤트

 

[ 사용 태그 ]

input, textarea

 

[ 사용 예시 ]

✔ input에 드래그 붙혀넣기 차단

 const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
   event.preventDefault(); // 붙여넣기 동작을 막음
  };
  
  <input onPaste={handlePaste} />

 

---

5. onTouchStart

: 터치 이벤트가 시작될 때 실행되는 이벤트

- 지원 기기 : 모바일, 태블릿

- onTouchMove, onTouchEnd와 함께 사용하면 스와이프 동작 감지 가능

[ 사용 태그 ]

모든 HTML 요소에서 사용 가능

[ 사용 예시 ]

✔ 모바일 input 태그 클릭시 화면 확대 방지

 

---

6. autoComplete

: 사용자가 이전에 입력한 값을 자동으로 제안하여 입력을 돕는 기능 제공

 

[ 사용 태그 ]

input, form 태그

 

[ 사용 예시 ]

• autoComplete="on": 브라우저가 사용자의 입력 기록을 기억하고 자동 완성 기능을 활성화 (default)
• autoComplete="off": 자동 완성 기능을 비활성화하여 브라우저가 이전에 입력한 값을 기억하지 않음

 

---

7. tabIndex

: 웹 페이지에서 탭 키를 눌렀을 때 포커스가 이동하는 순서를 지정하는 속성

 

[ 사용 태그 ]

input, textarea, select, a 등

[ 사용 예시 ]

- tabindex = "0" : 해당 요소는 문서의 기본 순서에 따라 포커스를 받는다. (기본값)

- tabindex = "-1" : 탭 순서에서 제외된다.

- tabindex="1, 2, 3, ... : 지정한 숫자에 따라 탭 순서를 설정