disabled 속성: 요소의 상호작용 제어

📌 disabled 속성

: HTML 및 React 컴포넌트에서 요소의 상호작용을 제어하는데 사용

• 요소가 사용자 상호작용을 받을 수 없도록 만든다.
• 주로 버튼, 입력 필드, 선택 상자 등과 같은 사용자 인터페이스(UI) 요소에 적용한다.
• 기능
  
  • 상호작용 비활성화
    
    • disabled 속성이 설정된 요소는 사용자가 클릭하거나 입력할 수 없게 된다. 
      ex) 버튼이 disabled 상태일 때, 사용자는 그 버튼을 클릭할 수 없다.
  • 스타일링
    
    • 브라우저는 disabled 상태인 요소에 대해 기본적으로 시각적으로 구분되도록 스타일을 적용한다.
    • 일반적으로 disabled 상태인 버튼은 흐릿해지거나 회색으로 표시된다.
  • 폼 제출 방지
    
    • disabled 속성이 설정된 입력 필드는 폼이 제출될 때 해당 데이터가 전송되지 않도록 한다.
      ➡︎ 비활성화된 입력 필드는 폼 데이터에 포함되지 않는다.

 

• HTML

<button disabled>Disabled Button</button>
<input type="text" disabled placeholder="Disabled Input" />

 

 

• React
  
  • 부모 컴포넌트에서 전달된 `isDisabled` prop에 따라 버튼을 동적으로 활성화 / 비활성화 한다.

import React from 'react';

function MyButton({ isDisabled, onClick }) {
  return (
    <button
      onClick={onClick}
      disabled={isDisabled}  // 'isDisabled' 값에 따라 버튼이 비활성화됨
    >
      Click Me
    </button>
  );
}

export default MyButton;

 

 

 

 

예제) 카운터 컴포넌트

• 최소값에 도달하거나 최대값에 도달했을 때 버튼을 비활성화

function CounterControls({ count, min, max, onIncrement, onDecrement }) {
  return (
    <div>
      <button
        onClick={onDecrement}
        disabled={count <= min} // 카운트가 최소값 이하일 때 버튼 비활성화
      >
        Decrement
      </button>
      <button
        onClick={onIncrement}
        disabled={count >= max} // 카운트가 최대값 이상일 때 버튼 비활성화
      >
        Increment
      </button>
    </div>
  );
}

 

 

---

 

HTML disabled 속성 - HTML: Hypertext Markup Language | MDN